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:-

<html>
<head>
   <script src="lib/jquery1.5.2.js"></script>
   <script src="lib/jquery.validate.js"></script>
   <script src="lib/myjs.js"></script>
</head>
<body>

<form id="form1" name="form1"> 
     Field 1: <input id="field1" type="text" class="required">
</form>

<div>
    <input id="btn" type="button" value="Validate">
</div>

</body>
</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?

User · Answer

document  ready function             form1   validate           rules                field1   required                     messages                field1   Please specify your name                         lt form id  form1  name  form1  gt       Field 1   lt input id  field1  type  text  class  required  gt       lt input id  btn  type  submit  value  Validate  gt   lt  form gt    You are also you using type  button   And I m not sure why you ought to separate the submit button  place it within the form  It s more proper to do it that way  This should work

User · 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      lt input id  field1  type  text  class  required  gt     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      lt input name  field1  id  field1  type  text    gt

User · Answer

You can also achieve other way using button tag  According new html5 attribute you also can add a form attribute like   lt form id  formId  gt       lt input type  text  name  fname  gt   lt  form gt    lt button id  myButton  form   formId  gt My Awesome Button lt  button gt    So the button will be attached to the form   This should work with the validate   plugin of jQuery like    var validator        formId    validate    validator element    myButton       It s working too with input tag  Source    https   developer mozilla org docs Web HTML Element Button

[jquery] jQuery form validation on button click

The answer is

Source :

Examples related to jquery

Examples related to jquery-validate

Tags