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发送表单之前,先验证所有输入。我现在已经尝试过许多版本,但是每次即使表单没有完全填写,最终还是要提交。我所有的输入都是“必需”类的。谁能看到我做错了吗?
另外,由于我的输入名称是用php生成的,因此我依赖于基于类的要求,因此我永远无法确定自己获得的名称或输入类型。
我在“页面”中显示/隐藏问题。
<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/>
JS:
function toggleVisibility(newSection) { $(".section").not("#" + newSection).hide(); $("#" + newSection).show(); }
您可以使用该submitHandler选项。基本上将$.ajax调用放入此处理程序中,即使用验证设置逻辑将其反转。
submitHandler
$.ajax
$('#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); } }); } });
该jQuery.validate插件会调用如果验证通过了提交处理。
jQuery.validate