我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。
我想在不提交表单的情况下触发验证。这可能吗?
我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。
我想在不提交表单的情况下触发验证。这可能吗?
当前回答
我认为这是最好的方法
将使用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>
其他回答
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });
不是最好的答案,但对我来说是可行的。
这是让HTML5对任何表单执行验证的一种非常直接的方式,同时仍然拥有对表单的现代JS控制。唯一需要注意的是提交按钮必须在<form>内。
html
<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>
js
// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );
function newAcctSubmit()
{
var myForm = jQuery( "#newUserForm" );
// html 5 is doing the form validation for us,
// so no need here (but backend will need to still for security)
if ( ! myForm[0].checkValidity() )
{
// bonk! failed to validate, so return true which lets the
// browser show native validation messages to the user
return true;
}
// post form with jQuery or whatever you want to do with a valid form!
var formVars = myForm.serialize();
etc...
}
你说的是两种不同的东西“HTML5验证”和使用javascript/jquery的HTML表单验证。
HTML5“拥有”用于验证表单的内置选项。例如在字段上使用“required”属性,如果不使用javascript/jquery,表单提交可能会失败(基于浏览器实现)。
使用javascript /jquery,你可以做这样的事情
$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});
你可以在不提交表单的情况下完成。
例如,如果id为“search”的表单提交按钮是另一种表单。你可以在提交按钮上调用click event,然后调用ev。然后是preventDefault。 对于我的案例,我验证表单A提交的表单B。 像这样
function validateFormB(ev){ // DOM Event object
//search is in Form A
$("#search").click();
ev.preventDefault();
//Form B validation from here on
}
我找到了一个适合我的方法。 只需要像这样调用一个javascript函数:
action=“javascript:myFunction();”
然后是html5验证……真的很简单:-)