jQuery form validation on button click

by

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" />

More Related Contents:

  1. jQuery validate: How to add a rule for regular expression validation?
  2. Validate that end date is greater than start date with jQuery
  3. jQuery Validation Plugin – adding rules that apply to multiple fields
  4. jQuery Validate array input element which is created dynamically
  5. Using JQuery Validate Plugin to validate multiple form fields with identical names
  6. jQuery validator and a custom rule that uses AJAX
  7. jQuery Form Validation before Ajax submit
  8. How can we specify rules for jQuery validation plugin by class?
  9. override jquery validate plugin email address validation
  10. how to test Recaptcha with jQuery Validate plugin
  11. jQuery Validation not working in IE7 + IE8
  12. Validate Format of an Email Address using Jquery.validate.js [closed]
  13. Validate fields using JQuery validation without any submit?
  14. jQuery Validation – Two fields, only required to fill in one
  15. jQuery Validation plugin won’t validate when in click event handler of
  16. How can I enable jquery validation on readonly fields?
  17. Limit number of characters in input field
  18. Placing error message for a checkbox array
  19. jQuery select box validation
  20. Validate dynamic field jquery
  21. jQuery Validation with multi-part form
  22. Ignore all hidden div but not one in jQuery validation
  23. JQuery Validate multiple fields with one error
  24. How to make select2 work with jquery.validation plugin?
  25. jQuery validator plugin + ajax submitting not working
  26. Validating array inputs using jquery validation plugin
  27. MVC 4 client side validation not working
  28. jQuery validator and datepicker click not validating
  29. jquery validation not waiting for remote validation to return true, considers form valid
  30. How to include JavaScript files by h:outputScript? [duplicate]

Leave a Comment