jQuery form validation on button click

Question

I have a simple page with a form and a button outside the form. I am trying to validate the form on the button click. I have added the rules for validation of the form on the document.onready function. However the form is not getting validated. HTML:- ```

``` JS:- ``` $(document).ready(function(){ $("#form1").validate({ rules: { field1: "required" }, messages: { field1: "Please specify your name" } }) $('#btn').click(function() { $("#form1").validate(); // This is not working and is not validating the form }); }); ``` Any idea what's wrong?

Accepted Answer

Within your `click` handler, the mistake is the `.validate()` method; it only initializes the plugin, it does not validate the `form`. To eliminate the need to have a `submit` button within the `form`, use `.valid()` to trigger a validation check... ``` $('#btn').on('click', function() { $("#form1").valid(); }); ``` jsFiddle Demo `.validate()` - to initialize the plugin (with options) once on DOM ready. `.valid()` - to check validation state (boolean value) or to trigger a validation test on the `form` at any time. Otherwise, if you had a `type="submit"` button within the `form` container, you would not need a special `click` handler and the `.valid()` method, as the plugin would capture that automatically. Demo without `click` handler EDIT: You also have two issues within your HTML... ``` ``` You don't need `class="required"` when declaring rules within `.validate()`. It's redundant and superfluous. The `name` attribute is missing. Rules are declared within `.validate()` by their `name`. The plugin depends upon unique `name` attributes to keep track of the inputs. Should be... ``` ```

jQuery form validation on button click

Solution

Problem