jquery validation how to hide error message only from specified hidden field

Question

I got form with many fields and one is hidden... on validation i use code below to set highlight messages

jQuery('.validatedForm').validate({
    errorElement: "label",
    errorClass: 'profile-error',
    highlight: function(element) {
        $(element).css("border-color","#d44");
        if($('#checkedhour').val() == "") {
            $('.table tbody td').css("border","solid 1px #d44");
        }
    },
    unhighlight: function(element) {
        $(element).css("border-color","#DFD7CA");
    },
});

the problem is that error also appear on the field which is hidden...this hidden field... What should i do to make error message only of hidden field does not appear but keep validation of this field?

<form>
  <input type="text" required name="field1" />
  <input type="hidden" required name="field2" />
  <button type="submit">send</button>
</form>

When the both fields are empty the errors messages will appear after both fields as label elements.. i just want the label appear only after not hidden fields.

Or you may need if ($(element).attr('type') == 'hidden'){} — Mattigins
– Mattigins, Commented Nov 12, 2015 at 5:20
i don't want hide element which is validated but only the error message... — X9DESIGN
– X9DESIGN, Commented Nov 12, 2015 at 5:22

Sparky · Accepted Answer · 2015-11-13 04:45:13Z

2

"Otherwise i still will be happiest when somebody find solution to make this via jquery validation plugin."

To control how messages are placed, use the plugin's errorPlacement option. Within a conditional checking if the element is hidden, you can eliminate its message.

errorPlacement: function(error, element) {
    if ($(element).is(":hidden")) {
        return false; // no message shown
    } else {
        error.insertAfter(element); // default message placement
    }
}

Proof of Concept demo: http://jsfiddle.net/o5pns06x/

edited Nov 13, 2015 at 4:45

answered Nov 12, 2015 at 13:38

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

1 Comment

X9DESIGN Over a year ago

Thanks. I should know that is the solution. Maybe when i needed help i was too tired for be ably. u must correct in your code from 'inserAfter' to 'insertAfter' Cheers

X9DESIGN · Accepted Answer · 2015-11-12 06:33:35Z

1

I find simple solution that make me happy. :-)

Even when we can't do this thru the jQuery.validate() i just forgot we can still use CSS!

Each created error element, in this case 'label' (as i set via errorElement), have also own attribute "for" which value based on "name" attribute from input field which is validated. So we can simple add to CSS requirment

<style type="text/css">
label[for=field2].profile-error {display: none !important;}
</style>

Now, only an error label with specified value of "for" attribute will not appear.

Otherwise i still will be happiest when somebody find solution to make this via jquery validation plugin. :))

answered Nov 12, 2015 at 6:33

X9DESIGN

7831 gold badge10 silver badges24 bronze badges

1 Comment

Sparky Over a year ago

You would use the errorPlacement option to control which messages are displayed. See my answer.

Collectives™ on Stack Overflow

jquery validation how to hide error message only from specified hidden field

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related