我有以下表格:
<form id="form" action="comments.php" method="post">
<ul>
<li><div class="formbox_titles">Name</div><input type="text" name="name" class="required comm_input" /></li>
<li><div class="formbox_titles">Email</div><input type="text" name="email" class="required comm_input"/></li>
<li><div class="formbox_titles">Message</div><textarea name="message" class="required comm_text"></textarea></li>
<li><input type="submit" value="Submit"></li>
</ul>
</form>
并遵循JQuery进行表单提交:
target: '#preview',
success: function() {
$('#formbox').slideUp('fast');
}
现在的问题是我还有表单验证JQuery代码
$().ready(function() {
// validate comment form
$("#form").validate({
});
});
它们都工作得很好,并且表单会弹出警告,表示所有三个字段都不能为空,但表单中的日期无论如何都会提交到数据库中。我使用以下代码进行表单验证http://bassistance.de/jquery-plugins/jquery-plugin-validation/所以问题是如何在第二个中添加第一个jquery,所以首先将在填写必填字段后执行?
希望有人能提供帮助。感谢。
答案 0 :(得分:13)
如果要手动提交表单,则必须绕过jQuery绑定事件。您可以通过以下任一方式实现:
$('#form_id')[0].submit();
或
$('#form_id').get(0).submit();
[0]或get(0)为您提供DOM对象而不是jQuery对象。
答案 1 :(得分:12)
从您的示例中,我不清楚您的页面的控制流程,但是,我假设您正在某处调用submit()
方法。验证表单后,在提交表单之前,请使用valid()
方法检查表单。您的代码应如下所示:
$("#form").validate();
if ($('#form').valid())
$('#form').submit();
答案 2 :(得分:4)
我对你的验证插件一无所知,但通常你可以使用这种代码的和平
<script>
$("form").submit(function() {
if (validationIsTrue()) {
return true;
}
else {
return false;
}
});
</script>
您必须进行验证,然后将true / false返回到表单的提交函数。如果插件确实返回bool值,您可以尝试这样的事情:
$("form").submit(function() {
return $(this).validate({ .... });
});
答案 3 :(得分:2)
当你说“提交表单中的日期”对我没有意义时,因为在你的代码片段中,我看不到任何名为“日期”的内容。
我广泛使用了.validate()插件...... 我可以告诉你的是,你正在使用的验证插件有一个你可以使用的submitHandler函数......
// validate comment form
$("#form").validate({
submitHandler : function(form) {
//do something here
form.submit();
}
});
只有满足所有验证规则时才会调用submitHandler。即在您的情况下,您有三个“必填”字段,这意味着除非所有三个字段都有值,否则不会提交此表单。
有了这个,我可以肯定地告诉你,根据所提供的信息,没有任何迹象表明你所描述的问题。提供更多更好的信息将有助于我们找出问题所在。
答案 4 :(得分:0)
您可以从JQuery表单验证插件中使用SubmitHandler
<script type="text/javascript" src="resources/jquery.min.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".form").validate({
rules: {
userName: {
required: true
},
password: {
required: true
}
},
messages: {
userName: {
required: "specify userName"
},
password: {
required: "specify password"
}
},
errorClass: "help-inline text-danger",
errorElement: "span",
highlight: function(element, errorClass, validClass) {
$(element).parents('.form-group').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.form-group').removeClass('has-error');
$(element).parents('.form-group').addClass('has-success');
},
submitHandler: function(form,e) {
e.preventDefault();
console.log('Form submitted');
$.ajax({
type: 'POST',
url: 'authenticate.jsp',
dataType: "html",
data: $('form').serialize(),
success: function(result) {
window.location.href = "dashboard.jsp";
},
error : function(error) {
}
});
return false;
}
});
});
</script>