removeClass("has-error") when field was changed Bootstrap, javascript

Question

My Javascript

$('.input-group').each(function() {
$mainElement = $(this);
$sibling = $mainElement.next('.form-control');
$sibling.change(function($mainElement) {
    return function() {
        $mainElement.removeClass('has-error');        
    }
}($mainElement)); });

My Form

<div class="form-group">
    <label>Organization</label>
    <div class="input-group has-error">
        <input type="text" class="form-control" name="organization" />
        <!--added code-->
        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    </div>
</div>
<div class="form-group">
    <label>Address</label>
    <div class="input-group has-error">
        <input type="text" class="form-control" name="address" />
        <!--added code-->
        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    </div>
</div>

The idea came from here after I try one of .each() solution here

I used twitter bootstrap for this for showing .has-error class after PHP back-end validation which I PREFERRED. Now I want to remove .each() .has-error classes for any changes happened in those .form-control under those .input-group.

Take note... I do not want to use the jQuery validation here.

Someone provided the BEST ANSWER here with a link below:

https://www.jsnippet.net/snippet/324/remove-class-haserror-when-field-was-changed

and I revised it like this:

$('.input-group').each(function(){
    $(this).find('.form-control').change(function(){
        $(this).closest('div').removeClass('has-error');            
    });
});

now as I revised my code, I added the:

$('.input-group').each(function(){
    $(this).find('.form-control').change(function(){
        $(this).closest('div').removeClass('has-error').closest('span').removeClass('glyphicon-remove');            
    });
});

within the and same thing I want to remove the glyphicon-remove class like the has-error class once the .form-control field have changed.

I played the code but still the glyphicon-remove class is still there.

So you want to remove `.has-error` class? `$('.has-error').removeClass('.has-error');` — Justinas, Sep 07 '15 at 08:53

score 0 · Answer 1 · answered Sep 07 '15 at 08:57

0

Not sure exactly what you're trying to do: just remove the .has-error class from the parent of the changed <input>?

$('.input-group .form-control').change( function() { $(this).parent().removeClass('has-error'); });

answered Sep 07 '15 at 08:57

mm689

359
2
10

score 0 · Answer 2 · answered Sep 07 '15 at 08:57

0

You can simply attach an event if element has the class

JSnippet Demo

$(function(){
    $('div.input-group.has-error').each(function(){
        $(this).find('input').change(function(){
            $(this).closest('div').removeClass('has-error');   
        });
    });
});

answered Sep 07 '15 at 08:57

Shlomi Hassid

6,500
3
27
48

The closest div might not be the one containing `has-error`. – rybo111 Sep 07 '15 at 09:27
so - `closest('div.has-error')` or `closest('.has-error')` – Shlomi Hassid Sep 07 '15 at 09:29
thank you for this... I almost used to think that I can use the closest() things around there but didnt step forward like that... I revised your code by removing the .has-error class and still working fine... $(function(){ $('div.input-group').each(function(){ $(this).find('input').change(function(){ $(this).closest('div').removeClass('has-error'); }); }); }); – EMPaguia Sep 08 '15 at 01:09
@EmersonMatiasPaguia the reason I put the `has-error` class is to add the handler only to the error elements - Its cleaner and avoid unneeded handlers. But both will work. – Shlomi Hassid Sep 08 '15 at 11:54

Jai · Answer 3 · 2015-09-07T09:39:31.447

0

You need to do some changes:

$('.form-control').find('input[type="text"]').on('input', function() {
     $(this).closest('.input-group').removeClass('has-error');        
});

Instead of change event use keydown on the input type text as change event happens only when you loose the focus from the element.
get in the context with $(this) get up to the desired parent with .closest() and just remove the class from it.

$(':input').on('input', function(e){
    console.log('type', e.type);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' >

edited Sep 07 '15 at 09:39

answered Sep 07 '15 at 09:03

Jai

74,255
12
74
103

`keydown` doesn't monitor `Right-click > Paste` – rybo111 Sep 07 '15 at 09:26
@rybo111 that is where `.on()` method is useful to bind the multiple events on a single selector. see the update. – Jai Sep 07 '15 at 09:33
`keydown paste input` will run the function twice on paste. – rybo111 Sep 07 '15 at 09:34
That depends how the elements are created and OP has not mentioned that and as per your last comment `input` will only be option to choose. and for dynamically created elements event can be delegated to the closest static parent like the wrapper of the element whether a div or to document/body itself. – Jai Sep 07 '15 at 09:40
Even if the OP doesn't use dynamic inputs now (which we don't know), he might later. If you can support them, might as well. – rybo111 Sep 07 '15 at 09:46
By the way, there is no need for `.find()` here. You can use `$('.form-control input[type="text"]')` – rybo111 Sep 07 '15 at 09:48
The alternative to `find()` seems instantaneous but if you have any data on `.find()` being quicker I'd be keen to see that. – rybo111 Sep 07 '15 at 10:56

score 0 · Answer 4 · answered Sep 07 '15 at 09:25

0

Use $(document).on('input'... to monitor all changes to dynamic and static elements:

$(document).on('input', '.form-control', function(){
  $(this).closest('.input-group').removeClass('has-error');
});

answered Sep 07 '15 at 09:25

rybo111

12,240
4
61
70

removeClass("has-error") when field was changed Bootstrap, javascript

My Javascript

My Form

4 Answers4