当我在输入字段外单击时,不会触发blur()

时间:2015-04-19 19:35:04

标签: javascript jquery html html5 dom

我试图创建一个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(),没有任何效果。

1 个答案:

答案 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)