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?

To the commenters: .validate() inside the click handler is not working because it's only re-initializing the plugin. Use .valid() to force validation. — Sparky
– Sparky, Commented Dec 2, 2012 at 17:45

Sparky · Accepted Answer · 2018-06-26 14:15:24Z

142

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

edited Jun 26, 2018 at 14:15

answered Dec 2, 2012 at 17:34

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Francisco Corrales Morales Over a year ago

I edited your answer, to make it work for a different kind of form structure. stackoverflow.com/a/28723145/2615737

Louise Eggleton Over a year ago

I think it's ironic that you say both superfluous and redundant.

ArtFranco Over a year ago

Instead of class="required"I use the attribute <input name="field1" id="field1" type="text" required /> that will automatically enters the validation script

Sparky Over a year ago

@ArtFranco, this plugin allows you to declare rules by class or by HTML5 attributes. Regardless, you must have missed the point of the answer... that no inline attributes are needed whenever the rules are defined within .validate().

Wap · Accepted Answer · 2012-12-02 18:31:23Z

1

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"
        }
    })
});

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

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.

edited Dec 2, 2012 at 18:31

answered Dec 2, 2012 at 17:45

Wap

5871 gold badge4 silver badges14 bronze badges

3 Comments

Wap Over a year ago

True. But could I at least get back my vote?haha Just a trivial mistake, and an oversight on my part. ;p ...Never did I say that it's wrong, I just said that it's cleaner that way. Generally speaking.

Wap Over a year ago

Why always find fault? Just tried to help by giving a working alternative, as quickly as I can so he can make use of it if it turns out that it's what he's looking for. It's not like I'm trolling. Exchanging comments is a long process, you know. Better look at the bright side, man.

Sparky Over a year ago

SO is about quality answers to specific questions... nothing more, nothing less.

Daryl Cluzel · Accepted Answer · 2018-05-31 15:20:44Z

0

You can also achieve other way using button tag

According new html5 attribute you also can add a form attribute like

<form id="formId">
    <input type="text" name="fname">
</form>

<button id="myButton" form='#formId'>My Awesome Button</button>

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

answered May 31, 2018 at 15:20

Daryl Cluzel

1

Collectives™ on Stack Overflow

jQuery form validation on button click

3 Answers 3

4 Comments

3 Comments

Source :

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Source :

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related