当我在输入字段之外单击时，blur（）不会触发

Question

I'm trying to to create a jQuery validation, so far I have managed to addClass('has-error') to div.form-control. I'm trying to remove that class when I press TAB or click out of the input field, but my code isn't working.

HTML code

<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 code

 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');
            });


        }

I've tried focusout() and focusleave(), nothing worked.

Answer 1

You have to put that blur triger outside of the if else like this :

    $(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');
        }
    });
});

also you cant use return false in if else statements. Return is used in functions. And im not aware if that emailpatt is somewhere else defined. If not, just delete it and let the if look like this :

if ($("#useremail").val() == "" || $("#useremail").val().length < 3)