Twitter bootstrap 发生jquery验证错误时,不会显示引导css错误类
我使用jquery验证插件来验证我使用bootstrap 2的表单,但是当违反规则时,会添加错误类,但在屏幕上输入框看起来没有任何不同。如何将输入“highlight”设置为引导错误类的默认值并正确显示Twitter bootstrap 发生jquery验证错误时,不会显示引导css错误类,twitter-bootstrap,jquery-validate,Twitter Bootstrap,Jquery Validate,我使用jquery验证插件来验证我使用bootstrap 2的表单,但是当违反规则时,会添加错误类,但在屏幕上输入框看起来没有任何不同。如何将输入“highlight”设置为引导错误类的默认值并正确显示 HERE IS THE HTML <dl class="dl-horizontal"> <dt>Contract Name: </dt> <dd> <input name="myInput" type=
HERE IS THE HTML
<dl class="dl-horizontal">
<dt>Contract Name: </dt>
<dd>
<input name="myInput" type="text" />
</dd>
</dl>
HERE IS THE JAVASCRIPT
<SCRIPT type="text/javascript" src="script/jquery.validate.min.js"></SCRIPT>
<script type="text/javascript">
$(document).ready(function(){
$('.submitOCform').click(function() {
if($("#submitForm").valid()) {
document.forms["submitForm"].submit();
}
});
//Load the form validation for the page
$("#submitForm").validate({
rules: {
"myInput": {
required: true,
maxlength:100
}
},
highlight: function(label){
$(label).closest('.control-group').addClass('error');
$(label).closest('.control-group').removeClass('success');
},
success: function(label){
$(label).closest('.control-group').addClass('success');
$(label).closest('.control-group').removeClass('error');
},
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
});
}); // END DOC Ready
</script>
这是HTML
合同名称:
下面是JAVASCRIPT
$(文档).ready(函数(){
$('.submitOCform')。单击(函数(){
if($(“#submitForm”).valid(){
document.forms[“submitForm”].submit();
}
});
//加载页面的表单验证
$(“#提交表单”).validate({
规则:{
“myInput”:{
要求:正确,
最大长度:100
}
},
突出显示:功能(标签){
$(标签)。最近('.control group')。addClass('error');
$(标签)。最近('.control group')。removeClass('success');
},
成功:功能(标签){
$(标签)。最近('.control group')。addClass('success');
$(标签)。最近('.control group')。removeClass('error');
},
errorPlacement:函数(错误,元素){
error.appendTo(element.parent());
}
});
}); // 结束文件准备就绪
添加验证功能的消息
属性,并编辑所需的消息。消息应包含在
标签中
$("#submitForm").validate({
rules: {
"myInput": {
required: true,
maxlength:100
}
},
messages: {
myInput: {
required: "<code>Please specify something here</code>",
}
}
});
您需要添加一个
<div class='control-group'></div>
在输入周围,您希望在错误时更改颜色