Problem with jquery closest() and addClass()

Question

I'm stuck right now, and I would appreciate any help. I have this form inside a Bootstrap modal:

<form action="" method="post" id="UserForm" class="form-horizontal">
<div class="modal-body">
    <div class="form-group">
        <label for="iUserName" class="col-sm-3 control-label">User Name</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="iUserName" id="iUserName" placeholder="User Name" value="" />
        </div>
    </div>

    <div class="form-group">
        <label for="iPassword" class="col-sm-3 control-label">Password</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" name="iPassword" id="iPassword" placeholder="iPassword" value="" />
        </div>
    </div>

    <div class="form-group">
        <label for="iConfPassword" class="col-sm-3 control-label">Confirm Password</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" name="iConfPassword" id="iConfPassword" placeholder="Confirm Password" value="" />
        </div>
    </div>

    <div class="form-group">
        <label for="iRoleSelect" class="col-sm-3 control-label">Role</label>
        <div class="col-sm-9">
            <select class="form-control select2" id="iRoleSelect" name="iRoleSelect" style="width: 100%;"></select>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-info pull-left" data-dismiss="modal">Cancel</button>
    <button type="submit" class="btn btn-info pull-right">Save</button>
</div>
</form>

And this is my JS:

$('#UserForm').on('submit', function () {
        var flag_UserName, flag_Password, flag_Role
        var emptyInput = $('#UserForm').find('input[type=text], input[type=password], select').val('')
        for (var i = 0; i < emptyInput.length; i++) {
            var div = emptyInput[i].closest('.form-group').addClass('has-warning')
            console.log(div)
            return false;
        }
    })

What I'm trying to do is to find every empty input inside the form, and then add a new 'has-warning' class to the closest div from that input. My current code is giving me this error:

TypeError: emptyInput[i].closest(...).addClass is not a function

Answer 1

I hope you try to do like this

 $('#UserForm').on('submit', function () { var flag_UserName, flag_Password, flag_Role var emptyInput = $('#UserForm').find('input[type=text], input[type=password], select'); for (var i = 0; i < emptyInput.length; i++) { $(emptyInput[i]).closest('.form-group').removeClass('has-warning') if($(emptyInput[i]).val()=='' || $(emptyInput[i]).val()==null){ var div = $(emptyInput[i]).closest('.form-group').addClass('has-warning') return false; break; } } }); 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <form action="" method="post" id="UserForm" class="form-horizontal"> <div class="modal-body"> <div class="form-group"> <label for="iUserName" class="col-sm-3 control-label">User Name</label> <div class="col-sm-9"> <input type="text" class="form-control" name="iUserName" id="iUserName" placeholder="User Name" value="" /> </div> </div> <div class="form-group"> <label for="iPassword" class="col-sm-3 control-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" name="iPassword" id="iPassword" placeholder="iPassword" value="" /> </div> </div> <div class="form-group"> <label for="iConfPassword" class="col-sm-3 control-label">Confirm Password</label> <div class="col-sm-9"> <input type="password" class="form-control" name="iConfPassword" id="iConfPassword" placeholder="Confirm Password" value="" /> </div> </div> <div class="form-group"> <label for="iRoleSelect" class="col-sm-3 control-label">Role</label> <div class="col-sm-9"> <select class="form-control select2" id="iRoleSelect" name="iRoleSelect" style="width: 100%;"></select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-info pull-left" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-info pull-right">Save</button> </div> </form> 

Answer 2

Try using $ sign. Working Example:

 $('#UserForm').on('submit', function () { var flag_UserName, flag_Password, flag_Role var emptyInput = $('#UserForm').find('input[type=text], input[type=password], select').val(''); for (var i = 0; i < emptyInput.length; i++) { var div = $(emptyInput[i]).closest('.form-group').addClass('has-warning') console.log(div) } return false; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="post" id="UserForm" class="form-horizontal"> <div class="modal-body"> <div class="form-group"> <label for="iUserName" class="col-sm-3 control-label">User Name</label> <div class="col-sm-9"> <input type="text" class="form-control" name="iUserName" id="iUserName" placeholder="User Name" value="" /> </div> </div> <div class="form-group"> <label for="iPassword" class="col-sm-3 control-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" name="iPassword" id="iPassword" placeholder="iPassword" value="" /> </div> </div> <div class="form-group"> <label for="iConfPassword" class="col-sm-3 control-label">Confirm Password</label> <div class="col-sm-9"> <input type="password" class="form-control" name="iConfPassword" id="iConfPassword" placeholder="Confirm Password" value="" /> </div> </div> <div class="form-group"> <label for="iRoleSelect" class="col-sm-3 control-label">Role</label> <div class="col-sm-9"> <select class="form-control select2" id="iRoleSelect" name="iRoleSelect" style="width: 100%;"></select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-info pull-left" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-info pull-right">Save</button> </div> </form>