[英]check if form validation is true
您好我有一個表單,我想通過表單驗證運行,然后提交。 如何檢查以下函數是否返回true以了解所有內容是否已經過驗證然后提交?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
$("#form").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
equired: true,
phone: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
phone: "Please provide a valid phone number.",
}
})
$('#form').submit(function(e){
// Stop the form actually posting
e.preventDefault();
// I want to be able to do the check here if the form has passed validation
if( $(this).valid() ) {
// Stop the form actually posting
// Send the request
$.post('/submit.php', {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
message: $('#message').val()
}, function(d){
alert("Thank you for submitting your request someone will contact your shortly.");
});
}
});
});
</script>
您可以調用jquery驗證的valid()方法。 喜歡
if($('#form').valid())
實際上你可以在加載html頁面時聲明validate函數,並在提交時檢查它是否有效
$(document).ready(function(){
$('#form').validate(rules...messages...);
如果使用規則和消息: -
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true,
phone: true }
},
messages: {
name: { required : "Please let us know who you are."},
email: {required : "A valid email will help us get in touch with you.",email : "A valid email will help us get in touch with you."},
phone: {required:"Please provide a valid phone number.",phone:"Please provide a valid phone number."}
}
這是一個很好的做法,如果是電話號碼,你需要拼寫錯誤
$('#form').submit(function(evt) {
evt.preventDefault();
.....
if( $('#form').valid() ) {
//submit the form via ajax
} else {
//show errors
}
});
});
我想你知道要添加每個輸入字段的name屬性: -
<input type="text" name="email" />
請注意, required
在phone
規則寫equired
並可能造成你的大部分問題 。 參見附帶的演示。
$(function() {
$('#form').validate(.......);
$('#form').submit(function(e) {
e.preventDefault();
.....
if( $(this).valid() ) {
//submit the form via ajax or otherwise
} else {
//report errors
}
});
});
您可以使用插件的valid
方法,如下所示。
$('#form').validate({...});
if ($('#form').valid()) {
// do your thing
}
更新了您的代碼,添加了submitHandler ,Callback以在表單有效時處理實際提交。
<script type="text/javascript">
$(function(){
$('#form').submit(function(e){
$("#form").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
equired: true,
phone: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
phone: "Please provide a valid phone number.",
},
submitHandler: function() {
// Stop the form actually posting
e.preventDefault();
// Send the request
$.post('/submit.php', {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
message: $('#message').val()
}, function(d){
alert("Thank you for submitting your request someone will contact your shortly.");
});
}
});
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.