我有一个使用html5验证电子邮件和必填字段的表单。 表格将通过ajax提交。 在允许表单通过ajax提交之前,如何确定表单已通过验证。
这是我的HTML:
<form action="" method="post" id="comment_form">
<input type="hidden" name="post_id" value="<?=$post->ID ?>" />
<label for="name">Name</label>
<input type="text" name="name" required="required">
<label for="email">Email Address</label>
<input type="email" name="email" required="required">
<label for="comment">Comment</label>
<textarea name="comment" required="required" >
</textarea>
<label for="submit"></label>
<button type="submit"class="button green meduim" id="comment_btn">Submit</button>
</form>
这是我的jquery
$("#comment_btn").click(function(e){
//the request url
var url = site_url+'comments/post_comment';
//cross site request forgery token
var xtoken = $("input[name='xtoken']").val();
//post data
var dataObj = {
"name":$('#name').val(),
"email":$("#email").val(),
"comment":$("#comment").val(),
"post_id":$("input[name='post_id']").val(),
"xtoken":xtoken
};
//dim form
$('#comment_form').addClass('dim');
//make request
$.ajax({
url:url,
type:'POST',
data:dataObj,
dataType:'json',
error:function() {},
success:function(resp) {
if(resp.status == "ok")
{
$('#comment_form').removeClass('dim');
}else {
alert("An error was encountered");
}
}
});
e.preventDefault();
});
有没有办法确定表单是否经过验证?
答案 0 :(得分:40)
不要绑定到提交按钮的click事件,只需绑定到表单的提交事件:
$('#comment_form').submit(function(e){
e.preventDefault();
//submit via ajax
});
答案 1 :(得分:7)
您可以使用验证器的form()功能,例如
var validator = $("#comment_form").validate(options);
if (validator.form()) {
// submit with AJAX
}
答案 2 :(得分:1)
最好不要依赖浏览器验证您的数据,确保使用required和pattern很酷,但我不会依赖它。
在将数据发送到您的网址之前,将您自己的验证写入您的javascript。您可以使用Regex进行此操作,或者可以使用许多可用的jQuery验证插件,例如h5validate或Validation。
答案 3 :(得分:0)
您可以注册标准表单'onsubmit',如果表单已成功通过验证并正在提交,则会触发该事件。
document.getElementById("comment_form").onsubmit = myPassedValidationHandler;
答案 4 :(得分:0)
对我来说,更好的使用和工作方式是
JQuery :
$(document).on('submit', '#address-form', function(event){
event.preventDefault();
// submit via Ajax
});
此方式用于防止通过ajax提交和发送表单,致敬!
答案 5 :(得分:0)
已经很久了,但这是我对这种情况的一种指责。特别是当我更喜欢将AJAX与本机HTML验证一起使用时。
document.getElementById("myBtn").addEventListener("click", checkIfValid);
const checkIfValid = {} => {
if(document.getElementById('myForm').checkValidity()) {
event.preventDefault();
// Do some AJAX stuff;
}
}
PS:如果在
event.preventDefault()
子句之外使用if
,则不会成功。