CODEWITHSUNDEEP
jqueryjquery-validate
John Baker
John Baker

Reputation: 435

Hide a label created by jQuery Validation

I have a form that I validate using jQuery Validation. The problem I'm having is that after a user interacts with a textbox jQuery Validation inserts a label under it which pushes everything below it down. Here is my HTML code for the form

<form id="addForm">
  <div class="form-group">
    <label for="first">First Name</label>
    <input type="text" class="form-control" name="first" id="first" placeholder="First Name">
 </div>
 <div class="form-group">
    <label for="last">Last Name</label>
    <input type="text" class="form-control" name="last" id="last" placeholder="Last Name">
 </div>
 <button type="submit" class="btn btn-primary">Send</button>
</form>

Validation script

$('#addForm').validate({
    rules: {
        first: {
            required: true
        },
        last: {
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
        $(element).closest('.form-control').removeClass('form-control-success').addClass('form-control-danger');
    },
    success: function (element) {
        element.closest('.form-group').removeClass('has-danger');
    }

});

I tried adding 

element.closest('.error').hide();

to the success function, but that doesn't do anything. I tried adding an empty errorPlacement function

errorPlacement: function(error, element) {

}

and it somewhat works. However, it stops the function where the error highlight around the textbox gets cleared once the error is fixed.

Here is a link to JSFiddle

https://jsfiddle.net/q9bppocn/

Upvotes: 0

Views: 1744

Answers (2)

Sparky
Sparky

Reputation: 98738

Since the plugin automatically toggles the message, you should not have to "remove" the error.

You should simply be using unhighlight with highlight. They are complementary functions, which when working together, will properly toggle the error. The success function is only meant for leveraging the label element whenever it's normally hidden.

highlight: function(element) {
    $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
    $(element).closest('.form-control').removeClass('form-control-success').addClass('form-control-danger');
},
unhighlight: function(element) {
    $(element).closest('.form-group').addClass('has-success').removeClass('has-danger');
    $(element).closest('.form-control').addClass('form-control-success').removeClass('form-control-danger');
}

DEMO: jsfiddle.net/vboantcf/

Upvotes: 2

Nordine
Nordine

Reputation: 866

You just have to remove the label on success.

JS

$('#addForm').validate({
    rules: {
        first: {
            required: true
        },
        last: {
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
        $(element).closest('.form-control').removeClass('form-control-success').addClass('form-control-danger');
    },
    success: function (element) {
      element.remove();
    }

});

Here's a jsFiddle.

Upvotes: 1

Related Questions