Twitter Bootstrap Question posted in

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

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.

Tags:

4

Answers


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

    Login or Signup to reply.
  2. 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');   
        });
    });
});
    Login or Signup to reply.
  3. 0

    You need to do some changes: 

    $('.form-control').find('input[type="text"]').on('input', function() {
     $(this).closest('.input-group').removeClass('has-error');        
});
    1. Instead of change event use keydown on the input type text as change event happens only when you loose the focus from the element.
    2. 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' >
    Login or Signup to reply.
  4. 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');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search