gpt4 book ai didi

javascript - 在 jQuery Validate 中成功时删除错误类

转载 作者:太空狗 更新时间:2023-10-29 13:20:44 27 4
gpt4 key购买 nike

我在使用 jQuery Validate 插件时遇到了问题。

每当有人在该字段中写入内容,并且该字段得到验证且没有错误时,“错误消息框”仍会显示。

我的问题是,如何删除此框?

这是我的代码:

CSS:

.register-box .field .has-error{
border: 1px solid red !important;

}
.register-box .field .has-error.success {
border:none !important;
}
.register-box .field .has-success{
border: 1px solid #42CDA1 !important;
background: #EEFBF7 !important;
color: black !important;
border-bottom: 0px !important;
}
.register-box .success > .error{
border: 1px solid #42CDA1 !important;
}
.register-box .field .valid{
border: 1px solid #42CDA1 !important;
}
.register-box .error{
margin-left: 200px !important;
float: left;
width: 150px;
max-width: 150px;
text-align: left;
color: red;
background: red;
color: white;
font-weight: bold;
font-size: 11px;
-webkit-font-smoothing: antialiased;
font-smooth: always;
-moz-osx-font-smoothing: grayscale;
padding: 5px 7px;

}

jQuery:

  $('#myform').validate({

debug: true,
errorClass: "has-error",
errorElement: "div",
errorContainer: $("#warning, #summary"),

errorPlacement: function (error, element) {
var name = $(element).attr("name");
error.appendTo($("#" + name + "_validate"));
$("#" + name + "_validate").addClass('error');
},


/*errorPlacement: function(error, element) {
error.appendTo("#errorHolder");
},*/
success: function(label,element) {
label.hide();
//var parent = $('.success').parent().get(0); // This would be the <a>'s parent <li>.
//$(parent).addClass('has-success');
},

rules: {
username: {
required: true
},
email: {
required: true,
minlength: 5
}

},

highlight: function(element, errorClass) {
$(element).addClass(errorClass);
},

messages: {
firstname: "Enter your firstname",
lastname: "Enter your lastname",
username: {
required: "Enter a username",
minlength: jQuery.format("Enter at least {0} characters"),
remote: jQuery.format("{0} is already in use")
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});

HTML:

<div class='register-box'>
<form id="myform" class="register-form">
<?php
if($checksuccess){ alert("success",$success); }
if($checkerror){ alert("error",$error);
}
?>
<div class="field">
<label for="username">Username</label>
<div id="username_validate"></div>
<input type="text" name="username" value="" placeholder="Enter your desired username"/>
</div>
<div class="field">
<label for="email">E-mail</label>
<div id="email_validate"></div>
<input type="email" name="email" value="" placeholder="Enter a valid e-mail address"/>
</div>
<button class="login-btn" data-disable-with="Signing In..." name="login" type="submit">Sign In</button>
</form>
</div>

请查看此 jsFiddle 示例:http://jsfiddle.net/5eb3pctr/

如您所见,如果您在第一个输入字段中输入内容,它会得到验证(输入周围的绿色边框)- 尽管红色“错误框”是可见的。

最佳答案

Success 中,您需要删除在错误容器 div 中添加的 error

因此您的代码将如下所示;

success: function(label,element) {
label.parent().removeClass('error');
label.remove();
},

DEMO

关于javascript - 在 jQuery Validate 中成功时删除错误类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25305400/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com