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, Dec 02 '12 at 17:45

Sparky · Accepted Answer · 2018-06-26T14:15:24.527

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 '18 at 14:15

answered Dec 02 '12 at 17:34

Sparky

98,165
25
199
285

I edited your answer, to make it work for a different kind of form structure. http://stackoverflow.com/a/28723145/2615737 – Francisco Corrales Morales Feb 25 '15 at 15:39
11

I think it's ironic that you say both superfluous and redundant. – Louise Eggleton Jun 15 '15 at 09:17
Worked like a charm, Thanks a lot @Sparky – Prasad Patel Apr 19 '17 at 05:44
Instead of `class="required"`I use the attribute `` that will automatically enters the validation script – ArtFranco Jul 23 '19 at 14:41
1

@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()`. – Sparky Jul 23 '19 at 14:44

Wap · Answer 2 · 2012-12-02T18:31:23.677

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 02 '12 at 18:31

answered Dec 02 '12 at 17:45

Wap

587
1
4
14

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 Dec 02 '12 at 18:45
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. – Wap Dec 02 '12 at 19:00
SO is about quality answers to specific questions... nothing more, nothing less. – Sparky Dec 02 '12 at 19:04

score 0 · Answer 3 · answered May 31 '18 at 15:20

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

jQuery form validation on button click

3 Answers3

Source :

Linked

Related