我已尝试使用jquery.validate.min.js进行表单验证。
当我点击提交按钮时，将显示带有红色边框的空必填字段。问题是页面正在加载，点击提交按钮。
验证无效。不知道问题出在哪里。提前谢谢。
jQuery(".submit-form").validate({
rules: {
fname: {
required: true,
},
lname: {
required: true,
},
phone: {
required: true,
},
mail: {
required: true,
mail: true
},
subjct: {
required: true,
},
message: {
required: true,
},
},
submitHandler: function (form) {
var postData = $(form).serializeArray();
var result = {};
$.each(postData, function () {
result[this.name] = this.value;
});
return false;
},
invalidHandler: function (form, validator) {
$('form input,textarea').each(function () {
if ($(this).val() == "") {
$(this).css('border', '1px solid red');
} else {
$(this).css('border', '1px solid #d2d2d2');
}
});
},
errorPlacement: function (error, element) {
return true;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form class="submit-form" method="post">
<div class="row input-row-common">
<div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12">
<input type="name" class="input-common fname" name="fname" placeholder="First Name">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<input type="name" class="input-common" name="lname" placeholder="Last Name">
</div>
<div class="col-lg-offset-2 col-md-offset-2"></div>
</div>
<div class="row input-row-common">
<div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12">
<input type="name" class="input-common" name="phone" id="phone" placeholder="Number">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<input type="email" class="input-common" name="mail" placeholder="Email ID">
</div>
<div class="col-lg-offset-2 col-md-offset-2"></div>
</div>
<div class="row input-row-common">
<div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-12 col-xs-12">
<textarea placeholder="Message" name="message" class="input-txtarea"></textarea>
</div>
<div class="col-lg-offset-2 col-md-offset-2"></div>
</div>
<div class="row input-row-common">
<div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-12 col-xs-12">
<input type="submit" class="submit" value="send message">
</div>
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-8"></div>
</div>
</form>
答案 0 :(得分：3)
查看此答案
jQuery(function ($) {
$("#submit-form").validate({
rules: {
fname: {
required: true,
},
lname: {
required: true,
},
phone: {
required: true,
},
mail: {
required: true,
mail: true
},
subjct: {
required: true,
},
message: {
required: true,
},
},
submitHandler: function (form) {
var postData = $(form).serializeArray();
var result = {};
$.each(postData, function () {
result[this.name] = this.value;
});
return false;
},
invalidHandler: function (form, validator) {
$('form input,textarea').each(function () {
if ($(this).val() == "") {
$(this).css('border', '1px solid red');
} else {
$(this).css('border', '1px solid #d2d2d2');
}
});
},
errorPlacement: function (error, element) {
return true;
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="submit-form" method="post">
<div class="row input-row-common">
<div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12">
<input type="name" class="input-common fname" name="fname" placeholder="First Name" required />
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<input type="name" class="input-common" name="lname" placeholder="Last Name">
</div>
<div class="col-lg-offset-2 col-md-offset-2"></div>
</div>
<div class="row input-row-common">
<div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12">
<input type="name" class="input-common" name="phone" id="phone" placeholder="Number" required />
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<input type="email" class="input-common" name="mail" placeholder="Email ID" required />
</div>
<div class="col-lg-offset-2 col-md-offset-2"></div>
</div>
<div class="row input-row-common">
<div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-12 col-xs-12">
<textarea placeholder="Message" name="message" class="input-txtarea" required /></textarea>
</div>
<div class="col-lg-offset-2 col-md-offset-2"></div>
</div>
<div class="row input-row-common">
<div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-12 col-xs-12">
<input type="submit" class="submit" value="send message" />
</div>
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-8"></div>
</div>
</form>
答案 1 :(得分：1)
SubmitHandler无效，因为您的代码中存在错误：
mail: {
required: true,
mail: true
},
应该是
mail: {
required: true,
email: true
},
并尝试在submitHandler中使用alert我相信你会得到它，比如
submitHandler: function (form) {
alert('submit');
return false;
},
答案 2 :(得分：0)
尝试添加preventDefault()以防止在表单提交时自动加载页面。
$(".submit-form").submit(function(e) {
console.log("> I am e.preventDefault ");
e.preventDefault(); # add this line
}).validate({
rules: {
fname: {
required: true,
},
lname: {
required: true,
},
phone: {
required: true,
},
mail: {
required: true,
mail: true
},
subjct: {
required: true,
},
message: {
required: true,
},
},
submitHandler: function (form) {
console.log(" In submitHandler!!"); # to make sure code is executing
var postData = $(form).serializeArray();
var result = {};
$.each(postData, function () {
result[this.name] = this.value;
});
return false;
},
invalidHandler: function (form, validator) {
console.log(">>> In invalidHandler!!"); # add this line
$('form input,textarea').each(function () {
if ($(this).val() == "") {
$(this).css('border', '1px solid red');
} else {
$(this).css('border', '1px solid #d2d2d2');
}
});
},
errorPlacement: function (error, element) {
return true;
}
});
答案 3 :(得分：0)
请使用以下代码并尝试。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form class="submit-form" method="post">
<div class="row input-row-common">
<div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12">
<input type="name" class="input-common fname" name="fname" placeholder="First Name">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<input type="name" class="input-common" name="lname" placeholder="Last Name">
</div>
<div class="col-lg-offset-2 col-md-offset-2"></div>
</div>
<div class="row input-row-common">
<div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12">
<input type="name" class="input-common" name="phone" id="phone" placeholder="Number">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<input type="email" class="input-common" name="mail" placeholder="Email ID">
</div>
<div class="col-lg-offset-2 col-md-offset-2"></div>
</div>
<div class="row input-row-common">
<div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-12 col-xs-12">
<textarea placeholder="Message" name="message" class="input-txtarea"></textarea>
</div>
<div class="col-lg-offset-2 col-md-offset-2"></div>
</div>
<div class="row input-row-common">
<div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-12 col-xs-12">
<input type="submit" class="submit" value="send message">
</div>
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-8"></div>
</div>
</form>
<script>
jQuery(".submit-form").validate({
rules: {
fname: {
required: true,
},
lname: {
required: true,
},
phone: {
required: true,
},
mail: {
required: true,
email: true
},
subjct: {
required: true,
},
message: {
required: true,
},
},
submitHandler: function (form) {
/*var postData = $(form).serializeArray();
console.log("psots data using ajax or normal submit"+postData);*/
form.submit();
},
});
</script>