Hướng dẫn server side validation in php using ajax - xác thực phía máy chủ trong php bằng ajax

Tôi đang làm việc trên một biểu mẫu gửi thông qua AJAX và được xử lý bằng PHP. Tôi đang tìm cách có xác thực phía máy chủ với kiểu dáng nội tuyến để tương ứng với bất kỳ trường nào không hợp lệ. Tôi có một thiết lập chủ yếu hoạt động, tuy nhiên, nó chỉ xác thực một trường một lần.

tức là nếu người dùng cố gắng gửi biểu mẫu nhưng để trống 2 trường, chỉ có phần đầu tiên trong số 2 người đó được tô sáng với lớp .Error-trường tôi đã tạo. Tôi thà rằng bất kỳ và tất cả các trường có lỗi đều được đánh dấu cùng một lúc. Tôi biết tôi có thể làm một việc như vậy trong jQuery bằng cách sử dụng một vòng lặp, nhưng tôi tự hỏi liệu đó có phải là điều có thể ở đây chỉ bằng cách sử dụng xác thực phía máy chủ không? Tôi không muốn in một thông báo lỗi cho từng trường vì biểu mẫu rất nhỏ và tôi có rất ít không gian để làm việc. Tôi muốn chỉ làm nổi bật (các) trường tạo ra lỗi sau đó hiển thị thông báo "Vui lòng điền vào các trường bắt buộc".

HTML cho biểu mẫu:

<form method="post" enctype="multipart/form-data" class="signupForm">
    <a class="sidebar">
        <span class="glyphicon glyphicon-arrow-left icon-arrow arrow"></span>
    </a>
    <a class="closeBtn">
        <span class="glyphicon glyphicon-remove"></span>
    </a>

    <h2 class="text-center black">Sign up for our newsletter.</h2>

    <p class="errors-container light">Please fill in the required fields.</p>

    <div class="success">Thank you for signing up!</div>
    <div class="form-field-content">
        <div class="form-group">
            <input class="form-control FirstNameTxt" type="text" name="first_name" placeholder="*First Name"
                   autofocus="">
        </div>
        <div class="form-group">
            <input class="form-control LastNameTxt" type="text" name="last_name" placeholder="*Last Name"
                   autofocus="">
        </div>
        <div class="form-group">
            <input class="form-control EmailTxt" type="email" name="email" placeholder="*Email"
                   autofocus="">
        </div>

        <div class="form-group submit-button">
            <button class="btn btn-primary btn-block button-submit" type="button">SIGN-UP</button>
            <img src="/img/ajax-loader.gif" class="progress" alt="Submitting...">
        </div>
    </div>
    <br/>                    
</form>

JQuery + Ajax:

;(function ($) {
    $(document).ready(function () {
        var FirstName = $('.FirstNameTxt');
        var LastName = $('.LastNameTxt');
        var EmailAddress = $('.EmailTxt');
        var successMessage = $('.success');
        var error = $('.errors-container');
        var submitbtn = $('.button-submit');
        var SubmitProgress = $('img.progress');

        var formdata = {};
        submitbtn.click(function (e) {
            resetErrors();
            postForm();
        });

        function resetErrors() {
            $('.signupForm input').removeClass('error-field');
        }

        function postForm() {
            $.each($('.signupForm input'), function(i, v) {
                if (v.type !== 'submit') {
                    formdata[v.name] = v.value;
                }
            });

            submitbtn.hide();
            error.hide();
            SubmitProgress.show();

            $.ajax({
                type: "POST",
                data: formdata,
                url: 'submission.php',
                dataType: "json"
            }).done(function (response) {
                submitbtn.show();
                SubmitProgress.hide();
                console.log("here");
                for (var i = 0; i < response.length; i++) {
                   var status = response[i].status;
                   var field = response[i].field;
                   if (status == "error") {
                     error.show();
                     $('input[name="' + field + '"]').addClass('error-field');
                   }
                    else if (status == "success") {
                        $('signupForm')[0].reset();
                        $('.form-field-content').hide();
                        successMessage.show();
                        $('.button-submit').html("Submitted");
                    }
                }
            });
        }
    });
}(jQuery));

Mã PHP xử lý biểu mẫu:

$firstname = $_POST['first_name'];
$lastname = $_POST['last_name'];
$emailfield = $_POST['email'];

$return = [];

if($firstname == ""){
    $validatonStatus = "error";
    $errorField = "first_name";
}
else if($lastname == ""){
    $validatonStatus = "error";
    $errorField = "last_name";
}
else if($emailfield == "" || !filter_var($emailfield, FILTER_VALIDATE_EMAIL)){
    $validatonStatus = "error";
    $errorField = "email";
}
else {
    $validatonStatus = "success";
    $errorField = "";
   //send email notification

}
$return[] = array(
    "status" => $validatonStatus,
    "field" => $errorField,
);

echo (json_encode($return));

Máy chủ là gì

Xác nhận trong Ajax là gì?

Máy chủ là gì

Làm thế nào để PHP và AJAX xử lý dữ liệu XML?