jQuery를 사용하여 PHP 및 MySQL에서 동적 Ajax 양식 유효성 검사

원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/php/dynamic-ajax-form-validation-in-php-mysql-using-jquery

이 게시물에서는 jQuery를 사용하여 PHP 및 MySQL에서 ajax 양식 유효성 검사를 만드는 방법을 보여줍니다. 이전 자습서에서 "PHP를 사용한 간단한 동적 양식 유효성 검사 함수"를 만들었습니다. PHP 함수에 대해 자세히 알아보려면 클릭하십시오. 이제 서버 측의 오류 응답을 표시한 다음 모든 양식 필드에 표시합니다. 결과 예는 다음과 같습니다.

CSS 양식 유효성 검사 스타일

CSS를 사용하는 양식 유효성 검사 스타일 코드입니다. 전체 코드를 다운로드하면 assets/css/styles.css에서 이 코드를 볼 수 있습니다.

/*Form Validation Error Styles*/
.form-group.error label,
.form-group.error .error-message {
    color:  red;
}

.form-group.error .form-control {
    border: 1px solid red;
}

JS 양식 유효성 검사 기능

이 섹션에서는 코딩 방법을 이해할 수 있도록 주석과 함께 제 jquery/javascript 함수의 실제 코드를 보여드리겠습니다.

코드를 보여드리기 전에 먼저 서버의 샘플 오류 JSON 배열 응답을 보여드리겠습니다.

{
    "email":{
        "required":"Email is required."
    },
    "first_name":{
        "required":"First name is required."
    },
    "last_name":{
        "required":"Last name is required."
    },"address":{
        "required":"Address is required."
    }
}

다음은 서버 양식 유효성 검사 응답을 처리하는 전체 기능입니다.

/**
 * A validation form function that will parse the json array and display to each fields
 *
 * @param {string} selector - The form selector
 * @param {json} errors - The json array response from the server form validation
 * @return {any}
 */
function validationForm(selector, errors) 
{
    // Loop the form errors
    $.each(errors, function(fieldName, fieldErrors) 
    {
        $.each(fieldErrors, function(errorType, errorValue) {

            var fieldSelector = selector + " [name='"+fieldName+"']";

            // Check if the ".form-group" class has still ".error" class
            // Then remove the ".error-message" element
            // Then rmove the ".error" class at ".form-group" class
            // To prevent element error duplication
            if($(fieldSelector).parents(".form-group").hasClass("error")) {
                $(fieldSelector).parents(".form-group").find(".error-message").remove();
                $(fieldSelector).parents(".form-group").removeClass("error");
            }

            // Insert error message after the textbox element 
            // Then add class ".error" to ".form-group" class for style needed
            $("<p class='error-message'>"+errorValue+"</p>")
                .insertAfter(fieldSelector)
                .parents(".form-group").addClass('error');

            // Remove error message on keyup by the textbox
            $(fieldSelector).on("keyup", function() {
                $(fieldSelector).parents(".form-group").find(".error-message").remove();
                $(fieldSelector).parents(".form-group").removeClass("error");
            });
        });
    });
}

코드 구현

이미 함수를 보여주었으니 이제 실제로 구현해 볼 차례입니다. 이를 구현하는 방법에 대한 코드는 다음과 같습니다.

function save() 
{
    $("#btnSubmit").on("click", function() {
        var $this           = $(this); //submit button selector using ID
        var $caption        = $this.html();// We store the html content of the submit button
        var form            = "#form"; //defined the #form ID
        var formData        = $(form).serializeArray(); //serialize the form into array
        var route           = $(form).attr('action'); //get the route using attribute action

        // Ajax config
        $.ajax({
            type: "POST", //we are using POST method to submit the data to the server side
            url: route, // get the route value
            data: formData, // our serialized array data for server side
            beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
                $this.attr('disabled', true).html("Processing...");
            },
            success: function (response) {//once the request successfully process to the server side it will return result here

                response = JSON.parse(response);

                // Check if there is has_error property on json response from the server
                if(!response.hasOwnProperty('has_error')) {
                    // Reload lists of employees
                    all();

                    // We will display the result using alert
                    Swal.fire({
                      icon: 'success',
                      title: 'Success.',
                      text: response.response
                    });

                    // Reset form
                    resetForm(form);
                } else {
                    // We will display the result using alert
                    validationForm("#form", response.errors);
                }

                $this.attr('disabled', false).html($caption);

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // You can put something here if there is an error from submitted request
            }
        });
    });
}

위의 코드에서 볼 수 있듯이 레코드를 저장하는 save() 함수가 있지만 서버에서 오류를 발견하면 완전히 저장하지 않고 클라이언트 측에서 JSON으로 구문 분석하는 오류 배열에 응답합니다. ajax success() 함수에서 볼 수 있듯이 응답에 JSON 속성 "has_error"가 없는지 확인하는 조건이 있지만 "has_error"속성이 존재하면 계속해서 validationForm() 함수를 호출합니다. 각 매개변수.

그게 전부입니다. 이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/php/dynamic-ajax-form-validation-in-php-mysql-using-jquery를 방문하십시오.

읽어 주셔서 감사합니다. 행복한 코딩 :)