jQuery Validation plugin not removing error class

Question

I'm stuggling with the removeClass from a jQuery function. I'm a newbie when it comes to jQuery and can't really think of an answer after a lot of search and testing.

I'm working with bootstrap. So, here's my HTML.

        <form id="flogin" method="post" action="<?php echo site_url('entrar');?>" class="form-horizontal" role="form">

        <fieldset>
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="email" class="form-control" name="uemail" id="uemail" placeholder="Enter e-mail..">
        </div>
    <label for="uemail" class="error"></label>

        <br />
    <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-chevron-right"></span></span>
            <input type="password" class="form-control" name="upasswd" id="upasswd" placeholder="Enter password...">
    </div>
    <label for="upasswd" class="error"></label>

        <br />
        <button type="submit" name="loginBtn" value="Ingresar" class="btn btn-default pull-right">Login</button>
    <!--<input name="submit" type="submit" value="Submit">-->
    </fieldset>
    </form>

And this is is my jQuery code:

$("#flogin").validate({
    onkeyup:true,
    rules: {
      uemail: "required",
      upasswd: "required",
      uemail: {
        required: true,
        email: true
      },
      upasswd: {
        required: true,
        minlength: 5
      }
    },
    highlight: function(element) {
    $(element).closest('.input-group').removeClass('has-success').addClass('has-error');
  },
  success: function(element) {
    $(element).closest('.input-group').removeClass('has-error').addClass('has-success');
  },
    messages: {
      uemail: "Por favor ingrese su email",
      upasswd: "Por favor ingrese su contraseña",
      uemail: {
        required: "Por favor ingrese su email",
        minlength: "Su e-mail debe ser valido.",
        email: "Verifique que este bien escrito su e-mail"
      },
      password: {
        required: "Por favor ingrese su contraseña",
        minlength: "Tu contraseña debe contener al menos 5 carácteres."
      }
    }
  });

I can't make this code work right, it validates but doesn't remove the has-error class after the e-mail has been entered correctly. Although it does add the has-error class when it's wrong but doesn't update when it's entered correctly again.

When I remove this peace of HTML it works, but I don't want the message there because it breaks the boxes and doesn't look good.

Any help would be pretty much appreciated.

Thank you.

Answer 1

You have three problems that I see right away...

1) onkeyup: true is not a valid way to set this option. onkeyup can only be set to false or to a function. If you want the default behavior, you simply leave it out entirely. See documentation:

Validate elements on keyup. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event. Set to false to disable. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value.

2) You're using the highlight function without using the unhighlight function. These two callbacks functions are meant to complement each other in order to toggle class on invalid/valid status of the element. The success callback is only used when you want to control/display the message <label>, which is normally hidden on "valid" elements.

Something like this will work more as you expect...

highlight: function(element) {   // <-- fires when element has error
    $(element).closest('.input-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) { // <-- fires when element is valid
    $(element).closest('.input-group').removeClass('has-error').addClass('has-success');
},

3) You're defining rules for the same fields twice...

rules: {
    uemail: "required",  // <- 'uemail' already defined below
    upasswd: "required", // <- 'upasswd' already defined below
    uemail: {
        required: true,
        email: true
    },
    upasswd: {
        required: true,
        minlength: 5
    }
}

Just remove the duplicates...

rules: {
    uemail: {
        required: true,
        email: true
    },
    upasswd: {
        required: true,
        minlength: 5
    }
}

Answer 2

I think there is no need of giving two times required in uemail and upasswd, you can remove one ... Your full jquery code..

$("#flogin").validate({
    onkeyup:true,
    rules: {
       uemail: {
        required: true,
        email: true
      },
      upasswd: {
        required: true,
        minlength: 5
      }
    },
    highlight: function(element) {
    $(element).closest('.input-group').removeClass('has-success').addClass('has-error');
  },
  success: function(element) {
    $(element).closest('.input-group').removeClass('has-error').addClass('has-success');
  },
    messages: {
      uemail: "Por favor ingrese su email",
      upasswd: "Por favor ingrese su contraseña",
      uemail: {
        required: "Por favor ingrese su email",
        minlength: "Su e-mail debe ser valido.",
        email: "Verifique que este bien escrito su e-mail"
      },
      password: {
        required: "Por favor ingrese su contraseña",
        minlength: "Tu contraseña debe contener al menos 5 carácteres."
      }
    }
  });
Hope this will work....