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
函数足以触发HTML5
validation
$(document).ready(function() { $('#urlSubmit').click(function() { if($('#urlForm')[0].checkValidity()) { alert("form submitting"); } }); });