Valid vs Validate

Question

I am trying to learn jQuery and have stumbled across a strange problem (perhaps strange only to me). So here goes: I have a form with id mainform in my app. Now I wanted to validate the form with jQuery. Also I wanted to set the invalid fields in blue color. For that I added css

.error{
  background-color:blue;
}

When I run $('form#mainform').valid(); in the console, I get the highlights and everything works fine. However when I run $('form#mainform').validate();, I get lots of data and nothing happens.

Also if I run .valid() before validate(), various options such as error placement etc. don't seem to work.

I want to know the difference between these, why they are behaving so differently and where they should be used. I will appreciate if anyone can point me in right direction.

Note: I am using jquery.validate.js

Answer 1

There are several differences between valid and validate. Interestingly, although the docs state that

"validate needs to be called on the form before checking it using this method"

this isn't actually the case, as valid calls validate() anyway.

The two major differences are

1. If you want to pass options into the plugin, you must call validate({...})
2. validate() doesn't highlight any errors, whereas valid() does. You could say that valid performs 'eager' validation whereas validate sets up a 'lazy' validation, basically if you call validate() you won't see any immediate change on the page, whereas with valid() you might.

3. valid can be called on a subset of form elements, whereas validate must be called on the form itself:

   $('form').validate({/* options here */});

   $('.myfields').valid()

Answer 2

Assuming you are using Jquery validate library.

Docs saying

validate() needs to be called on the form before checking it using valid() method.

Not .valid() before validate()

http://jqueryvalidation.org/valid/

http://jqueryvalidation.org/validate