我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。
我想在不提交表单的情况下触发验证。这可能吗?
我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。
我想在不提交表单的情况下触发验证。这可能吗?
当前回答
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });
不是最好的答案,但对我来说是可行的。
其他回答
$(document).on("submit", false);
submitButton.click(function(e) {
if (form.checkValidity()) {
form.submit();
}
});
也许是迟到了,但不知何故,我在试图解决类似的问题时发现了这个问题。由于该页没有代码为我工作,同时我提出了解决方案,工作如指定。
问题是,当你的<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验证(类型和模式匹配),而无需提交表单。
你可以在不提交表单的情况下完成。
例如,如果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
}
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {
}
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()
来自:html5表单验证
这种方法对我来说很有效:
Add onSubmit attribute in your form, don't forget to include return in the value. <form id='frm-contact' method='POST' action='' onSubmit="return contact()"> Define the function. function contact(params) { $.ajax({ url: 'sendmail.php', type: "POST", dataType: "json", timeout: 5000, data: { params:params }, success: function (data, textStatus, jqXHR) { // callback }, error: function(jqXHR, textStatus, errorThrown) { console.log(jqXHR.responseText); } }); return false; }