Problem with jquery closest() and addClass()

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

edited Nov 15 '18 at 9:22

dmcgrandle

2,2711621

asked Nov 15 '18 at 4:54

HealMee

419

add a comment |

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

edited Nov 15 '18 at 9:22

dmcgrandle

2,2711621

asked Nov 15 '18 at 4:54

HealMee

419

add a comment |

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

edited Nov 15 '18 at 9:22

dmcgrandle

2,2711621

asked Nov 15 '18 at 4:54

HealMee

419

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

jquery

edited Nov 15 '18 at 9:22

dmcgrandle

2,2711621

asked Nov 15 '18 at 4:54

HealMee

419

edited Nov 15 '18 at 9:22

dmcgrandle

2,2711621

asked Nov 15 '18 at 4:54

HealMee

419

edited Nov 15 '18 at 9:22

dmcgrandle

2,2711621

edited Nov 15 '18 at 9:22

dmcgrandle

2,2711621

edited Nov 15 '18 at 9:22

dmcgrandle

2,2711621

asked Nov 15 '18 at 4:54

HealMee

419

asked Nov 15 '18 at 4:54

HealMee

419

asked Nov 15 '18 at 4:54

HealMee

419

add a comment |

2 Answers
2

active

oldest

votes

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>

edited Nov 15 '18 at 5:27

answered Nov 15 '18 at 5:04

Udara Kasun

1,076515

lol sorry i have to delete my previous comment, i didn't notice you add $ before emptyInput

– HealMee
Nov 15 '18 at 5:19

But irrespective of how many fields you enter the value, all are getting appended with has-warning class right?

– Mithil Mohan
Nov 15 '18 at 5:22

also i updated my answer plz check it

– Udara Kasun
Nov 15 '18 at 5:28

Yes it is fine now

– Mithil Mohan
Nov 15 '18 at 5:34

add a comment |

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>

answered Nov 15 '18 at 5:13

Ismail Rubad

7741722

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312639%2fproblem-with-jquery-closest-and-addclass%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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>

edited Nov 15 '18 at 5:27

answered Nov 15 '18 at 5:04

Udara Kasun

1,076515

lol sorry i have to delete my previous comment, i didn't notice you add $ before emptyInput

– HealMee
Nov 15 '18 at 5:19

But irrespective of how many fields you enter the value, all are getting appended with has-warning class right?

– Mithil Mohan
Nov 15 '18 at 5:22

also i updated my answer plz check it

– Udara Kasun
Nov 15 '18 at 5:28

Yes it is fine now

– Mithil Mohan
Nov 15 '18 at 5:34

add a comment |

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>

edited Nov 15 '18 at 5:27

answered Nov 15 '18 at 5:04

Udara Kasun

1,076515

lol sorry i have to delete my previous comment, i didn't notice you add $ before emptyInput

– HealMee
Nov 15 '18 at 5:19

But irrespective of how many fields you enter the value, all are getting appended with has-warning class right?

– Mithil Mohan
Nov 15 '18 at 5:22

also i updated my answer plz check it

– Udara Kasun
Nov 15 '18 at 5:28

Yes it is fine now

– Mithil Mohan
Nov 15 '18 at 5:34

add a comment |

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>

edited Nov 15 '18 at 5:27

answered Nov 15 '18 at 5:04

Udara Kasun

1,076515

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>

$('#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>

$('#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>

edited Nov 15 '18 at 5:27

answered Nov 15 '18 at 5:04

Udara Kasun

1,076515

edited Nov 15 '18 at 5:27

answered Nov 15 '18 at 5:04

Udara Kasun

1,076515

answered Nov 15 '18 at 5:04

Udara Kasun

1,076515

answered Nov 15 '18 at 5:04

Udara Kasun

1,076515

lol sorry i have to delete my previous comment, i didn't notice you add $ before emptyInput

– HealMee
Nov 15 '18 at 5:19

But irrespective of how many fields you enter the value, all are getting appended with has-warning class right?

– Mithil Mohan
Nov 15 '18 at 5:22

also i updated my answer plz check it

– Udara Kasun
Nov 15 '18 at 5:28

Yes it is fine now

– Mithil Mohan
Nov 15 '18 at 5:34

add a comment |

lol sorry i have to delete my previous comment, i didn't notice you add $ before emptyInput

– HealMee
Nov 15 '18 at 5:19

But irrespective of how many fields you enter the value, all are getting appended with has-warning class right?

– Mithil Mohan
Nov 15 '18 at 5:22

also i updated my answer plz check it

– Udara Kasun
Nov 15 '18 at 5:28

Yes it is fine now

– Mithil Mohan
Nov 15 '18 at 5:34

lol sorry i have to delete my previous comment, i didn't notice you add $ before emptyInput

– HealMee
Nov 15 '18 at 5:19

But irrespective of how many fields you enter the value, all are getting appended with has-warning class right?

– Mithil Mohan
Nov 15 '18 at 5:22

also i updated my answer plz check it

– Udara Kasun
Nov 15 '18 at 5:28

Yes it is fine now

– Mithil Mohan
Nov 15 '18 at 5:34

add a comment |

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>

answered Nov 15 '18 at 5:13

Ismail Rubad

7741722

add a comment |

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>

answered Nov 15 '18 at 5:13

Ismail Rubad

7741722

add a comment |

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>

answered Nov 15 '18 at 5:13

Ismail Rubad

7741722

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>

$('#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>

$('#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>

answered Nov 15 '18 at 5:13

Ismail Rubad

7741722

answered Nov 15 '18 at 5:13

Ismail Rubad

7741722

answered Nov 15 '18 at 5:13

Ismail Rubad

7741722

answered Nov 15 '18 at 5:13

Ismail Rubad

7741722

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky