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.

Sparky · Accepted Answer · 2013-11-12 18:26:03Z

4

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
    }
}

edited Nov 12, 2013 at 18:26

answered Nov 12, 2013 at 18:09

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ariel Over a year ago

That's it, after traying lots of selector combinations, and reading more question I did exactly what you said here. Use the unhighlight function. Thank you very much!

Sparky Over a year ago

@Ariel, you're welcome. However, don't forget to pay close attention to the other two issues I mentioned.

Ariel Over a year ago

Yes, thank you for those tips, a much cleaner and effective code. Already cleaned it up and set it up right. Thank you (:

Sikander · Accepted Answer · 2013-11-12 13:58:20Z

0

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....

answered Nov 12, 2013 at 13:58

Sikander

6561 gold badge8 silver badges22 bronze badges

2 Comments

Ariel Over a year ago

It didn't work, the error class (has-error) remains set after values are entered correctly, and it should be removing the error class and setting the 'has-success' instead. Thanks anyways.

Ariel Over a year ago

Makes the same behavior (shows the error texts, as it should), but without those functions it doesn't change the color of the boxes (it should change the class of div with class 'input-group'). The problem is that it adds the 'has-error' class, but when you enter a valid value, it doesn't remove it and add the 'has-success' class to it. When I place the <label for="uemail" class="error"></label> inside the .input-group div it works, but i don't want the error message in there.

Collectives™ on Stack Overflow

jQuery Validation plugin not removing error class

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related