Ajax提交之前的jQuery表单validation
JavaScript位：
$(document).ready(function() { $('#form').submit(function(e) { e.preventDefault(); var $form = $(this); // check if the input is valid if(! $form.valid()) return false; $.ajax( { type:'POST', url:'add.php', data:$('#form').serialize(), success:function(response) { $("#answers").html(response); } }); }) }); HTML位：
<input type="text" name="answer[1]" class="required" /> <input type="text" name="answer[2]" class="required" />
所以这是我正在尝试使用的代码。 这个想法是在我使用Ajax发送表单之前，让所有input得到validation。 我已经尝试了很多版本，但是每次我都提交了，即使表单没有完全填写。 我所有的input都是“必需”类。 任何人都可以看到我做错了什么？
另外，我依赖于基于类的需求，因为我的input名称是用php生成的，所以我永远无法确定我得到的是什么名字[id]或inputtypes。
当我在“页面”中浏览时，我会显示/隐藏问题。
<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/>
JS：
function toggleVisibility(newSection) { $(".section").not("#" + newSection).hide(); $("#" + newSection).show(); }
你可以使用submitHandler选项。 基本上把这个$.ajax调用放在这个处理程序中，也就是用validation设置逻辑来反转它。
$('#form').validate({ ... your validation rules come here, submitHandler: function(form) { $.ajax({ url: form.action, type: form.method, data: $(form).serialize(), success: function(response) { $('#answers').html(response); } }); } });
如果validation通过， jQuery.validate插件将调用提交处理程序。
首先你不需要显式地添加classRules因为jquery.validate插件会自动检测到。 所以你可以使用这个代码：
- 在表单提交时，您可以防止默认行为
- 如果表单是无效的，则停止执行。
-
否则，如果有效发送ajax请求。
$('#form').submit( function(e){ e.preventDefault(); var $form = $(this); // check if the input is valid if(! $form.valid()) return false; $.ajax({ type: 'POST', url: 'add.php', data: $('#form').serialize(), success: function(response) { $("#answers").html(response); } }); });
你可以尝试做：
if($("#form").validate()) { return true; } else { return false; }
这个具体的例子只是检查input，但是你可以调整它，把这样的东西添加到你的.ajax函数中：
beforeSend: function() { $empty = $('form#yourForm').find("input").filter(function() { return this.value === ""; }); if($empty.length) { alert('You must fill out all fields in order to submit a change'); return false; }else{ return true; }; },
我认为我首先validation表单，如果validation将通过，比我会做阿贾克斯后。 不要忘记在脚本的末尾添加“return false”。
我认为submitHandler与jQueryvalidation是很好的解决scheme。 请从这个代码中得到想法。 灵感来自@Darin Dimitrov
$('.calculate').validate({ submitHandler: function(form) { $.ajax({ url: 'response.php', type: 'POST', data: $(form).serialize(), success: function(response) { $('#'+form.id+' .ht-response-data').html(response); } }); } });
> Required JS for jquery form validation > ## jquery-1.7.1.min.js ## > ## jquery.validate.min.js ## > ## jquery.form.js ## $("form#data").validate({ rules: { first: { required: true, }, middle: { required: true, }, image: { required: true, }, }, messages: { first: { required: "Please enter first", }, middle: { required: "Please enter middle", }, image: { required: "Please Select logo", }, }, submitHandler: function(form) { var formData = new FormData($("#image")[0]); $(form).ajaxSubmit({ url:"action.php", type:"post", success: function(data,status){ alert(data); } }); } });
形成原生的JavaScript checkValidity函数足以触发HTML5validation
$(document).ready(function() { $('#urlSubmit').click(function() { if($('#urlForm')[0].checkValidity()) { alert("form submitting"); } }); });
