我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。
我想在不提交表单的情况下触发验证。这可能吗?
我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。
我想在不提交表单的情况下触发验证。这可能吗?
当前回答
也许是迟到了,但不知何故,我在试图解决类似的问题时发现了这个问题。由于该页没有代码为我工作,同时我提出了解决方案,工作如指定。
问题是,当你的<form> DOM包含单个<button>元素时,一旦触发,<button>将自动sumbit形式。如果您使用AJAX,您可能需要防止默认操作。但有一个问题:如果你只是这样做,你也会阻止基本的HTML5验证。因此,只有当表单有效时,才应该防止该按钮的默认值。否则,HTML5验证将阻止你提交。jQuery checkValidity()将帮助这:
jQuery:
$(document).ready(function() {
$('#buttonID').on('click', function(event) {
var isvalidate = $("#formID")[0].checkValidity();
if (isvalidate) {
event.preventDefault();
// HERE YOU CAN PUT YOUR AJAX CALL
}
});
});
上面描述的代码将允许您使用基本的HTML5验证(类型和模式匹配),而无需提交表单。
其他回答
要检查某个字段是否有效,请使用:
$('#myField')[0].checkValidity(); // returns true|false
要检查表单是否有效,请使用:
$('#myForm')[0].checkValidity(); // returns true|false
如果你想显示某些浏览器(如Chrome)的原生错误消息,不幸的是,唯一的方法是通过提交表单,就像这样:
var $myForm = $('#myForm');
if (!$myForm[0].checkValidity()) {
// If the form is invalid, submit it. The form won't actually submit;
// this will just cause the browser to display the native HTML5 error messages.
$myForm.find(':submit').click();
}
请记住,到目前为止,并不是所有浏览器都支持HTML5验证。
我认为这是最好的方法
将使用jQuery验证插件,使用最佳实践的表单验证,它也有良好的浏览器支持。因此,您不必担心浏览器兼容性问题。
并且我们可以使用jQuery验证valid()函数来检查所选表单是否有效,或者是否所有所选元素都有效,而无需提交表单。
<form id="myform">
<input type="text" name="name" required>
<br>
<button type="button">Validate!</button>
</form>
<script>
var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
console.log( "Valid: " + form.valid() );
});
</script>
下面的代码为我工作,
$("#btn").click(function () {
if ($("#frm")[0].checkValidity())
alert('sucess');
else
//Validate Form
$("#frm")[0].reportValidity()
});
我知道这个问题已经有了答案,但我还有另一个可能的解决方案。
如果使用jquery,你可以做到这一点。
首先在jquery上创建两个扩展,这样你就可以在需要时重用它们。
$.extend({
bypassDefaultSubmit: function (formName, newSubmitMethod) {
$('#'+formName).submit(function (event) {
newSubmitMethod();
event.preventDefault();
}
}
});
接下来,在你想使用它的地方做一些这样的事情。
<script type="text/javascript">
/*if you want to validate the form on a submit call,
and you never want the form to be submitted via
a normal submit operation, or maybe you want handle it.
*/
$(function () {
$.bypassDefaultSubmit('form1', submit);
});
function submit(){
//do something, or nothing if you just want the validation
}
</script>
你说的是两种不同的东西“HTML5验证”和使用javascript/jquery的HTML表单验证。
HTML5“拥有”用于验证表单的内置选项。例如在字段上使用“required”属性,如果不使用javascript/jquery,表单提交可能会失败(基于浏览器实现)。
使用javascript /jquery,你可以做这样的事情
$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});