0

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?

EthanTowne
  • 351
  • 4
  • 14
  • 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 => http://jsfiddle.net/6UAs3/ – Sparky Nov 21 '13 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 Nov 21 '13 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 Nov 21 '13 at 18:51
  • Oh man, this explains it. Shows I do not know HTML 5 well enough then. Thank you. – EthanTowne Nov 21 '13 at 18:53
  • 1
    See this question/answer for how to achieve the look you want while using the jQuery Validation plugin: http://stackoverflow.com/q/14741688/594235 – Sparky Nov 21 '13 at 18:57

2 Answers2

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?

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
-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();
Srini
  • 37
  • 1
  • So this will keep the default Validate behavior? – EthanTowne Nov 21 '13 at 18:46
  • 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. – Srini Nov 21 '13 at 20:21