提交带有Ajax和Jquery验证的表单 [英] Submit form with Ajax and Jquery validation

问题描述

我有表格.有两个输入:姓名和生日.我的代码是:

<div id="block"> 
 <form role="form" id="addForm" method="post">
     <div class="form-group">
         <label for="name">Name</label>
         <input type="text" class="form-control" name="name" id="name" placeholder="Enter name">
     </div>
     <div class="form-group">
         <label for="birthday">Birthday</label>
         <input type="text" class="form-control" id="birthday" required placeholder="Enter birthday">
     </div>
     <button name="submit" id="submit" value="" type="submit" class="btn btn-large btn-primary btn-block">Add</button>
 </form>
</div>

然后我使用jquery验证表单:

<script>
$().ready(function() {
  $("#addForm").validate({
        rules:{
            name:{
                required: true,
                minlength: 2,
                maxlength: 10,
            },
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        messages:{
            name:{
                required: "This field is required",
                minlength: "Name must be at least 2 characters",
                maxlength: "Maximum number of characters - 10",
            },
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                url:'addEmpl.php',
                type:'GET',
                dataType: 'html',
                success: function(data) {
                    $("#block").html(data);
                }
            });
        }
    });
});
 </script>

当所有输入正确时，我单击添加我的Ajax"按钮不起作用.

submitHandler可能有一些错误吗?

解决方案

您可以这样写:

$().ready(function() {                 
    $("#addForm").validate({
        rules:{
            name:{
                required: true,
                minlength: 2,
                maxlength: 10,
            },
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        messages:{
            name:{
                required: "This field is required",
                minlength: "Name must be at least 2 characters",
                maxlength: "Maximum number of characters - 10",
            },
        },
        submitHandler: function(form) { 
              $.ajax({
                  url:'addEmpl.php',
                type:'GET',
                dataType: 'html',
                success: function(data) {
                    $("#block").html(data);
                }
             });
             return false; // required to block normal submit since you used ajax
         }
     });
});

这是小提琴 http://jsfiddle.net/bhumi/bvdu94c4/

I have form. There are two inputs:name and birthday. My code is:

<div id="block"> 
 <form role="form" id="addForm" method="post">
     <div class="form-group">
         <label for="name">Name</label>
         <input type="text" class="form-control" name="name" id="name" placeholder="Enter name">
     </div>
     <div class="form-group">
         <label for="birthday">Birthday</label>
         <input type="text" class="form-control" id="birthday" required placeholder="Enter birthday">
     </div>
     <button name="submit" id="submit" value="" type="submit" class="btn btn-large btn-primary btn-block">Add</button>
 </form>
</div>

And I validate my form using jquery:

<script>
$().ready(function() {
  $("#addForm").validate({
        rules:{
            name:{
                required: true,
                minlength: 2,
                maxlength: 10,
            },
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        messages:{
            name:{
                required: "This field is required",
                minlength: "Name must be at least 2 characters",
                maxlength: "Maximum number of characters - 10",
            },
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                url:'addEmpl.php',
                type:'GET',
                dataType: 'html',
                success: function(data) {
                    $("#block").html(data);
                }
            });
        }
    });
});
 </script>

When all inputs are right and I click on button Add my Ajax doesn't work.

Maybe are some wrongs with submitHandler?

解决方案

You can write like this:

$().ready(function() {                 
    $("#addForm").validate({
        rules:{
            name:{
                required: true,
                minlength: 2,
                maxlength: 10,
            },
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        messages:{
            name:{
                required: "This field is required",
                minlength: "Name must be at least 2 characters",
                maxlength: "Maximum number of characters - 10",
            },
        },
        submitHandler: function(form) { 
              $.ajax({
                  url:'addEmpl.php',
                type:'GET',
                dataType: 'html',
                success: function(data) {
                    $("#block").html(data);
                }
             });
             return false; // required to block normal submit since you used ajax
         }
     });
});

Here is the fiddle http://jsfiddle.net/bhumi/bvdu94c4/

这篇关于提交带有Ajax和Jquery验证的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！