jQuery Validation plugin validating form on button click

Question

So I have a seven part form where six tabs are hidden via CSS and when a user clicks next another part fades in.

I've submitted the page to make sure the plugin is working; it is. Essentially its just going to the next part of the form without validation the current part

As an example

HTML

<form id = "form1" action = "backend.php" method = "post">
<label for "phone">First Name </label>
    <input type = "text" name = "fName" placeholder = "First Name..." class = "required" id = "fName" />
<button id = "btn" type = "button" class = "buttonnav next">next</button>
</form>

Javascript

$('#btn').click( function() { $("#form1").validate();});

Are you using the jQuery Validate plugin? That would be something to mention. — Sparky
– Sparky, Commented Mar 15, 2013 at 18:08

Sparky · Accepted Answer · 2013-03-15 22:18:53Z

21

If you're using the jQuery Validate plugin, with your code, the plugin is not initialized until after the button is clicked. If the plugin is not initialized, then there's no validation.

$('#btn').click( function() { $("#form1").validate();});

Instead, .validate() gets called once on DOM ready to initialize the plugin on the form.

If you want to test the form at any time after initialization, you would use the .valid() method.

$(document).ready(function () {

    $('#form1').validate({ // initialize plugin
        // your options
    });

    $('#btn').click( function() { 
        $("#form1").valid();  // test the form for validity
    });

});

I have no idea how you've set up each part to to interact with each other or what other code is being used. Based on your OP alone, here is a working example using my answer above.

DEMO: http://jsfiddle.net/pqVJM/

$(document).ready(function () {

    $('#form1').validate();

    $('#btn').click(function () {
        if ($("#form1").valid()) {
            alert('hello - valid form');
        }
    });

});

edited Mar 15, 2013 at 22:18

answered Mar 15, 2013 at 18:11

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

4 Comments

Art Taylor Over a year ago

Sorry, I am using the validation plugin. I edited my script to this; unfortunately I'm still getting the same result as before. Dont know if this helps or not(or shows my ignorance...), I tried if ($("#form1").valid() == true){alert("hello");} inside the click handler to see if anything was going through, and was getting constant "hello"

Sparky Over a year ago

@ArtTaylor, I have no idea where else you're going wrong... you have not shown enough code in your OP.

Sparky Over a year ago

@ArtTaylor, See my edited answer. With my answer applied, your code is working: jsfiddle.net/pqVJM

Art Taylor Over a year ago

Thank you for your input, I got it this morning. I really appreciate the help guys.

Collectives™ on Stack Overflow

jQuery Validation plugin validating form on button click

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related