我试图创建一个jQuery验证,到目前为止,我已经设法将divClass(' has-error')设置为div.form-control。当我按TAB键或单击输入字段时,我尝试删除该类,但我的代码不起作用。
HTML代码
<form class="form-horizontal" onsubmit='return false;' id="useradd">
<input type="hidden" id="token" name="_token" value="{{csrf_token()}}">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" value="" name="username" id="username" required>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group" id="useremail-div">
<label class="col-sm-2 control-label" id="email-label">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" value="" name="useremail" id="useremail">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" value="" name="password" id="password" required>
</div>
</div>
JS代码
if ($("#username").val() == "" || $("#username").val().length < 3) {
$("#username").addClass('error');
return false;
} else {
name = $("#username").val();
$("#username").removeClass('error');
}
if ($("#useremail").val() == "" || $("#useremail").val().length < 3 || !emailpatt.test($("#useremail").val())) {
$("#useremail-div").addClass('has-error');
$('#email-label').text('Incorrect Email Address');
return false;
} else {
$("#useremail").blur(function() {
console.log('out');
});
}
我尝试过focusout()和focusleave(),没有任何效果。
答案 0 :(得分:2)
你必须把那个模糊部分放在if if else之外:
$(document).ready(function(){
$("#username").blur(function() {
if ($("#username").val() == "" || $("#username").val().length < 3) {
$("#username").addClass('error');
} else {
name = $("#username").val();
$("#username").removeClass('error');
}
});
$("#useremail").blur(function() {
if ($("#useremail").val() == "" || $("#useremail").val().length < 3 || !emailpatt.test($("#useremail").val())) {
$("#useremail-div").addClass('has-error');
$('#email-label').text('Incorrect Email Address');
} else {
$("#useremail-div").removeClass('has-error');
$('#email-label').text('Email Address');
}
});
});
你也不能在if语句中使用return false
。返回用于函数。我不知道该emailpatt是否在其他地方定义。如果没有,只需删除它,让if看起来像这样:
if ($("#useremail").val() == "" || $("#useremail").val().length < 3)