jQuery .Validate() submitHandler not working

Question

I'm trying to make a form that when you press the button it will validate, if the validation is successful if will call a function which will do a few things (saving form data to local storage etc).

The problem is I can't get the submitHandler to fire the function. Here is the jsFiddle I've been working on.

http://jsfiddle.net/JamesKrawczyk/xdo9nn48/

And the code.

<script>
function fireifworked()
{
$('.testIfWorking').html('IT WORKED');
}

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

        },
         submitHandler: function(form) {
            fireifworked();
        }
    })



    $('#btn').click(function() {
        $("#form1").valid();
    });
});
</script>

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

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

<div class="testIfWorking">
CHANGE THIS IS WORKING
</div>

Can you try your luck by changing the type of the button to submit. — Jayaraj.K
– Jayaraj.K, Commented Mar 31, 2016 at 6:34

Flatlyn · Accepted Answer · 2016-04-01 00:29:17Z

2

The button needs to be inside the form and be of type submit rathe than button

<script>
function fireifworked()
{
$('.testIfWorking').html('IT WORKED');
}

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

        },
         submitHandler: function(form) {
            fireifworked();
        }
    })



    $('#btn').click(function() {
        $("#form1").valid();
    });
});
</script>

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

</form>




<div class="testIfWorking">
CHANGE THIS IS WORKING
</div>

answered Apr 1, 2016 at 0:29

Flatlyn

2,0508 gold badges41 silver badges70 bronze badges

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

Comments

Miguel Trabajo · Accepted Answer · 2016-03-31 05:04:10Z

1

The . in the jquery selector is missing, it should be $('.testIfWorking').html('IT WORKED')

edited Mar 31, 2016 at 5:04

answered Mar 31, 2016 at 4:55

Miguel Trabajo

4673 silver badges12 bronze badges

Comments

Prajwal · Accepted Answer · 2016-03-31 06:25:11Z

-1

Seems like jquery is not linked.

Add this in the header before your jquery code starts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

There are several ways to start using jQuery on your web site. You can:

-Download the jQuery library from jQuery.com

-Include jQuery from a CDN, like Google as above example.

edited Mar 31, 2016 at 6:25

answered Mar 31, 2016 at 6:19

Prajwal

4195 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery .Validate() submitHandler not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related