Javascript 使用AJAX在CodeIgniter中进行表单验证

我有一个表单和字段是全名、密码和手机号码，每个字段都有一个按钮。所有字段在页面中显示为单个。如果用户单击按钮，则将显示下一个字段，但我必须使用AJAX对其进行验证。我必须在每个字段上显示单个错误。你能帮我吗

我尝试了以下代码，但在警报中得到错误输出

我的控制器

看法

---

您可能会看到验证的结果：

if ($this->form_validation->run() == FALSE) {
    echo validation_errors();
} 

请看这篇文章，它可能会帮助你。。。

---

要使用jQuery和ajax提交进行验证，您可以尝试以下脚本

jQuery(function($){

        $(".active_form").validate({
          rules: {
              fullname: {
                required: true,
                 minlength:3,
                maxlength:50
            },

            password: {
                required: true,
                 minlength:3,
                maxlength:50
            },
            mobile: {
                required: true,
                 minlength:3,
                maxlength:50
            }
          },
          submitHandler: function (form) {

                var request;
                // bind to the submit event of our form

                // let's select and cache all the fields
                var $inputs = $(".active_form").find("input, select, button, textarea");
                // serialize the data in the form
                var serializedData = $(".active_form").serialize();

                //alert(serializedData);

                // let's disable the inputs for the duration of the ajax request
                $inputs.prop("disabled", true);

                request = $.ajax({
                        url: "http://ajax/function/url/here",
                        type: "POST",
                        data: serializedData,
                });

                // callback handler that will be called on success

                request.done(function(data) {

                        // log a message to the console
                        alert("success awesome");

                });
                request.fail(function (jqXHR, textStatus, errorThrown) {
                        // log the error to the console

                });
                request.always(function () {
                        // reenable the inputs
                        $inputs.prop("disabled", false);
                });
            }
      });

    });

---

最后，我找到了解决办法。我不知道这是正确的方法，但它解决了我的问题

$(document).ready(function() {
    $("form[name='form_1']").validate({
        rules: {
            fullname: {
                required: true,
                 minlength:3,
                maxlength:50
            },

            password: {
                required: true,
                 minlength:3,
                maxlength:50
            },
            mobile: {
                required: true,
                 minlength:3,
                maxlength:50
            }

        },
    })

   $('body').on('click', '#continue_to_password', function(e) {
        if($("form[name='form_1']").valid())
        {
            $('#name_form').hide();
            $('#password_form').show(); 
        }
    });

   $('#continue_to_mobile').on('click', function() {
     if($("form[name='form_1']").valid()){
          $('#password_form').hide();
          $('#mobile_form').show();
            }
});

});

---

您尚未拆分验证过程。到目前为止，你是如何独自解决这个问题的？此外，鉴于目前服务器所做的只是执行长度检查，为什么不改为在客户端执行此操作？@ChrisG，无论我在这里上传了什么。@ChrisG，我尝试了客户端，但在最后单击“提交”按钮时，这也起到了作用。是的，汤姆先生，现在我在警报中收到一个错误，但我如何逐一显示？因为每个字段都有按钮，并且在最后单击“提交”按钮后会显示错误。

if ($this->form_validation->run() == FALSE) {
    echo validation_errors();
} 

jQuery(function($){

        $(".active_form").validate({
          rules: {
              fullname: {
                required: true,
                 minlength:3,
                maxlength:50
            },

            password: {
                required: true,
                 minlength:3,
                maxlength:50
            },
            mobile: {
                required: true,
                 minlength:3,
                maxlength:50
            }
          },
          submitHandler: function (form) {

                var request;
                // bind to the submit event of our form

                // let's select and cache all the fields
                var $inputs = $(".active_form").find("input, select, button, textarea");
                // serialize the data in the form
                var serializedData = $(".active_form").serialize();

                //alert(serializedData);

                // let's disable the inputs for the duration of the ajax request
                $inputs.prop("disabled", true);

                request = $.ajax({
                        url: "http://ajax/function/url/here",
                        type: "POST",
                        data: serializedData,
                });

                // callback handler that will be called on success

                request.done(function(data) {

                        // log a message to the console
                        alert("success awesome");

                });
                request.fail(function (jqXHR, textStatus, errorThrown) {
                        // log the error to the console

                });
                request.always(function () {
                        // reenable the inputs
                        $inputs.prop("disabled", false);
                });
            }
      });

    });

$(document).ready(function() {
    $("form[name='form_1']").validate({
        rules: {
            fullname: {
                required: true,
                 minlength:3,
                maxlength:50
            },

            password: {
                required: true,
                 minlength:3,
                maxlength:50
            },
            mobile: {
                required: true,
                 minlength:3,
                maxlength:50
            }

        },
    })

   $('body').on('click', '#continue_to_password', function(e) {
        if($("form[name='form_1']").valid())
        {
            $('#name_form').hide();
            $('#password_form').show(); 
        }
    });

   $('#continue_to_mobile').on('click', function() {
     if($("form[name='form_1']").valid()){
          $('#password_form').hide();
          $('#mobile_form').show();
            }
});

});