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验证的表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-22 22:23
查看更多