我有一个简单的联系表单，在提交时发布到MySql，我在提交表单之前尝试在客户端验证（我将在客户端工作后实现服务器端验证）。出于某种原因，当我提交表单时，它会发布到数据库但不启动客户端验证。任何帮助将不胜感激。
这是HTML（twitter bootstrap）代码：
<form action="/contact.php" method="post" id="contactUs">
<div class="control-group">
<label class="control-label" for="Name">NAME<sup>*</sup></label>
<div class="controls">
<input type="text" class="span4" name="name" placeholder="Name" id="name">
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email">EMAIL<sup>*</sup></label>
<div class="controls">
<input type="text" class="span4" name="email" placeholder="Email" id="email">
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Subject">Subject<sup>*</sup></label>
<div class="controls">
<input type="text" class="span4" name="subject" placeholder="Subject" id="subject">
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label for="textarea" class="control-label" for="Comment">COMMENTS<sup>*</sup></label>
<div class="controls">
<textarea rows="5" class="span6" name="comments" id="message"></textarea>
<span class="help-block"></span>
</div>
</div>
<div class="control-group form-button-offset">
<input type="submit" class="btn btn-large btn-primary pull-right" value="Send Message" />
</div>
<input type="hidden" name="redirect" value="contact_us.html" />
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/contactUs.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
以下是contactUs.js的代码：
$(document).ready(function(){
$('#contactUs').validate({
rules: {
name: {
minlength: 4,
required: true
},
email: {
required: true,
email: true,
},
subject: {
minlength: 5,
required: true
},
submission_Reason: {
minlength: 5,
required: true
},
comments: {
minlength: 8,
required: true,
}
},
messages: {
name: "Please enter your first and last name",
email: "Please enter a valid email address",
subject: "Please enter a subject",
comments: "Please enter a short message",
},
highlight: function (element, errorClass, validClass) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
unhighlight: function (element, errorClass, validClass) {
$(element).closest('.control-group').removeClass('error').addClass('success');
},
success: function (label) {
$(label).closest('form').find('.valid').removeClass("invalid");
},
errorPlacement: function (error, element) {
element.closest('.control-group').find('.help-block').html(error.text());
}
});
};
和PHP contact.php文件：
<?php
$con=mysqli_connect("host","username","password","dbname");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="INSERT INTO contactUs (name, email, subject, comments)
VALUES
('$_POST[name]','$_POST[email]','$_POST[subject]','$_POST[comments]')";
$sql="INSERT INTO contactUs (`date_created`) VALUES (now())";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
echo "Your form has been received, Thank you!";
mysqli_close($con);
?>
当我提交表单时，不会触发客户端验证，结果是：
我做错了什么？为什么验证没有发生？
答案 0 :(得分：0)
试试这个
$.validator.setDefaults(
{
submitHandler: function() { submit(); },
showErrors: function(map, list)
{
this.currentElements.parents('label:first, .controls:first').find('.error').remove();
this.currentElements.parents('.control-group:first').removeClass('error');
$.each(list, function(index, error)
{
var ee = $(error.element);
var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('.controls:first');
ee.parents('.control-group:first').addClass('error');
eep.find('.error').remove();
eep.append('<p class="error help-block"><span class="label label-important">' + error.message + '</span></p>');
});
//refreshScrollers();
}
});
$.validator.setDefaults(
{
submitHandler: function() { submit(); },
showErrors: function(map, list)
{
this.currentElements.parents('label:first, .controls:first').find('.error').remove();
this.currentElements.parents('.control-group:first').removeClass('error');
$.each(list, function(index, error)
{
var ee = $(error.element);
var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('.controls:first');
ee.parents('.control-group:first').addClass('error');
eep.find('.error').remove();
eep.append('<p class="error help-block"><span class="label label-important">' + error.message + '</span></p>');
});
//refreshScrollers();
}
});
$(function()
{
// validate signup form on keyup and submit
$("#validateSubmitForm").validate({
rules: {
name: {
minlength: 4,
required: true
},
email: {
required: true,
email: true,
},
subject: {
minlength: 5,
required: true
},
submission_Reason: {
minlength: 5,
required: true
},
comments: {
minlength: 8,
required: true,
}
},
messages: {
name: "Please enter your first and last name",
email: "Please enter a valid email address",
subject: "Please enter a subject",
comments: "Please enter a short message"
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});