Question

我有表格。有两个输入：名称和生日。我的代码是：

<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可能有些错误吗？

Answer 1

尝试使用以下代码而不是ajaxSubmit：

$.ajax({
  type: "GET",
  url: "addEmpl.php",
  data: $(this).serialize(),
  dataType: "html"
  success: function(data) {
    $("#block").html(data);
  }
});

希望它会对你有所帮助:)。

Answer 2

您可以这样写：

$().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/

Answer 3

你可以试试这个

foo = "Lorem" -> array[]
foo = "Lorem*" -> array['Lorem Ipsum']
foo = "Dummy" -> array[]
foo = "*Dummy*" -> array['simply dummy text']
foo = "*" -> array['Lorem Ipsum', 'simply dummy text', 'nothing']

使用Ajax和Jquery验证提交表单

3 个答案: