Question

我有一个表单，字段为Fullname, Password and Mobile no，每个字段都有一个按钮。所有字段都在页面中显示单个字段。如果用户单击该按钮，则会显示下一个字段，但我必须使用AJAX在其上设置验证。我必须在每个字段上显示单个错误。你能帮帮我吗？

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

我的控制器

public function submit_from(){
        $this->load->library('form_validation');
        $this->load->helper('form');
        $this->form_validation->set_error_delimiters('', '');
      $this->form_validation->set_rules('fullname', 'fullname', 'required|min_length[5]|max_length[20]|trim|xss_clean');
      $this->form_validation->set_rules('password', 'password', 'required|min_length[5]|max_length[20]|trim|xss_clean');
      $this->form_validation->set_rules('mobile', 'mobile', 'required|min_length[5]|max_length[20]|trim|xss_clean');

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

        }
}

查看

<!DOCTYPE html>
<html>
<head>
    <title></title>
     <style type="text/css">
    #password_form, #mobile_form{
      display: none;
    }
  </style>
</head>
<body>

<form class="active_form" name="form_1" method="post">
    <div id="name_form">
   <!--Name form********************************************************-->
      <label>Full name</label>
      <input type="text" name="fullname" id="fullname" placeholder="Full name">
      <?php echo form_error('fullname'); ?>
      <button type="button" id="continue_to_password">Continue to Password</button>
   </div>
   <!--password form********************************************************-->
   <div id="password_form">
      <label>Password</label>
      <input type="password" name="password" id="password" placeholder="password name">
      <?php echo form_error('password'); ?>
      <button type="button" id="continue_to_mobile">Continue to mobile no</button>

   </div>
   <!--mobile form********************************************************-->
   <div id="mobile_form">
      <label>Mobile number</label>
      <input type="text" name="mobile" id="mobile" placeholder="mobile no">
      <?php echo form_error('mobile'); ?>
      <button type="submit">Submit</button>
   </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

$(function () {
$('form[name="form_1"]').on('submit', function (e) {
e.preventDefault();
        $.ajax({
            type: 'post',
            url: '<?php echo base_url("index.php/testcontroller/submit_from"); ?>',
           data: $('form[name="form_1"]').serialize(),
            success: function (data) {
                alert(data);
            }
        });
    });
});

/*When clicked on button*/
$('body').on('click', '#continue_to_password', function(e) {
  $('#name_form').hide();
  $('#password_form').show();
});
$('#continue_to_mobile').on('click', function() {

  $('#password_form').hide();

  $('#mobile_form').show();
});
</script>
</body>
</html>

我尝试使用Jquery进行客户端验证，但是当我点击提交按钮时，这也在最后工作。

Jquery的

$(document).ready(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
            }

        },
    })

    $('#continue_to_password').click(function() {
        $(".active_form").valid();
    });
});

Answer 1

您可能会看到验证结果：

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

请看这篇文章它可以帮到你...... Do form validation with jquery ajax in codeigniter

Answer 2

要使用带有ajax提交的jQuery进行验证，您可以尝试使用此脚本。

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);
                });
            }
      });

    });

Answer 3

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

$(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();
            }
});

});

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

3 个答案: