您的验证选项中有一个拼写错误。规则必须是规则。
还必须指定名称属性:
HTML
<form action="" method="" id="contact">
<div class="form-group">
<label>Your Name</label>
<input type="text" class="form-control" placeholder="Enter Your Name" name="firstname" required="" minlength="5" />
</div>
<div class="form-group">
<label>Your E-mail</label>
<input type="email" class="form-control" placeholder="Enter Your Email" name="useremail" required="" />
</div>
<div class="form-group">
<label>Contact Detail</label>
<input type="text" class="form-control" placeholder="Enter Contact Number" name="mobile" minlength="10" maxlength="10" required="" />
</div>
<div class="form-group">
<label>Type</label>
<select class="form-control">
<option>Inquiry</option>
<option>Complaints</option>
<option>Feedback</option>
<option>Others</option>
</select>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" rows="3" cols="5" placeholder="Enter Your Message Here..." id="message" minlength='10' required=""></textarea>
</div>
<button type="submit" class="btn btn-primary btn-lg">Send</button>
</form>
JavaScript
$(document).ready(function () {
$('#contact').validate({
rules: {
firstname: {
required: true,
minlength: 5,
},
useremail: {
required: true,
}
},
errorClass : 'has-error',
validClass : 'has-success',
highlight:function(element, errorClass, validClass) {
$(element).parents('div').addClass(errorClass).children().removeClass(errorClass);
$(element).parents('div').removeClass(validClass).children().removeClass(validClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('div').removeClass(errorClass).children().removeClass(errorClass);
$(element).parents('div').addClass(validClass).children().removeClass(validClass);
}
});
})
Fiddle here http://jsfiddle.net/jaq316/nX4dt/
可以使用以下 CSS 来完成错误和有效的设置:
.has-error
{
background-color: rgb(255, 0, 0);
}
.has-success
{
background-color: rgb(0, 255, 0);
}