jQuery form validation on button click

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…

<input id="field1" type="text" class="required">

• 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…

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