jQuery Validate Plugin Default Behavior

Question

I am trying to keep the default error message placement and behavior when using jQuery Validate plugin. When I set any properties of the validate() object the default behavior seems to change.

For example. If I simply decorate my html input with the required attribute here are the results:

HTML attribute:

<input id="name" type="text" required/>

Dedfault jQuery Validate Behavior

Once I modify a property of the validate object here is what I get:

After Validate Property Change

The code I am using to modify:

$("[id$='emailForm']").validate({
    debug: true,
    rules: {
        txtEmail: {
            required: true,
            email: true
        }
    }
});

So what gives. Why does all the formatting and placement change. What is the most simple way I can get it back to how it behaves by default?

You don't show nearly enough code to explain your pictures. The jQuery code alone can not do what you've shown, and this is the true default behavior => jsfiddle.net/6UAs3 — Sparky
– Sparky, Commented Nov 21, 2013 at 18:45
I can add the exact HTML attribute, but other than what I put in, there is no additional code. This is how jQuery validate works out of the box. — EthanTowne
– EthanTowne, Commented Nov 21, 2013 at 18:49
What you think is the default behavior of the jQuery Validate plugin is no such thing. Your first picture is the default HTML5 validation supplied by your HTML5 compliant browser. Your second picture is the default behavior of the jQuery Validation plugin. — Sparky
– Sparky, Commented Nov 21, 2013 at 18:51
Oh man, this explains it. Shows I do not know HTML 5 well enough then. Thank you. — EthanTowne
– EthanTowne, Commented Nov 21, 2013 at 18:53
See this question/answer for how to achieve the look you want while using the jQuery Validation plugin: stackoverflow.com/q/14741688/594235 — Sparky
– Sparky, Commented Nov 21, 2013 at 18:57

Community · Accepted Answer · 2017-05-23 12:28:46Z

1

Your code:

<input id="name" type="text" required/>

required is an HTML5 validation attribute. And what you see in your first picture is only what your HTML5 compliant browser is doing... it has nothing to do with the plugin. The plugin does nothing until you call the .validate() method to initialize it.

Once you call .validate() method, you are initializing jQuery Validation plugin and then it takes over. Your second picture is the default behavior of the plugin.

Demo of default look of the plugin: http://jsfiddle.net/6UAs3/

See this question/answer for how to achieve the "look" you want while using the jQuery Validation plugin: How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Nov 21, 2013 at 18:54

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

Comments

Srini · Accepted Answer · 2013-11-21 18:44:58Z

-2

When you create the validate object for the first time, save it in a variable and use it later for triggering validations.

var validator = $("[id$='emailForm']").validate({
    debug: true,
    rules: {
        txtEmail: {
            required: true,
            email: true
        }
    }
});

// Trigger validation at later point by invoking the valid method instead of validate
var isValid = validator.valid();

answered Nov 21, 2013 at 18:44

Srini

371 bronze badge

2 Comments

EthanTowne Over a year ago

So this will keep the default Validate behavior?

Srini Over a year ago

Yes. But that depends on what you mean by default. If you solely rely on html 'required' attribute, you do not need the validator plugin. I am not sure what browsers your application has to support, but you cannot rely on the required attribute to work correctly in old browsers. Each call to validate method will apply default validations afresh on the element(s). The key is to call validate once and then use the validator object that it returns and call "valid()" method - that will return a boolean value.

Collectives™ on Stack Overflow

jQuery Validate Plugin Default Behavior

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related