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, Mar 31 '16 at 06:34
Try http://stackoverflow.com/questions/30720354/jquery-validate-submithandler-not-firing. — Jayaraj.K, Mar 31 '16 at 06:38

score 2 · Accepted Answer · answered Apr 01 '16 at 00:29

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>

Miguel Trabajo · Answer 2 · 2016-03-31T05:04:10.297

1

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

edited Mar 31 '16 at 05:04

answered Mar 31 '16 at 04:55

Miguel Trabajo

437
3
11

Prajwal · Answer 3 · 2016-03-31T06:25:11.257

-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 '16 at 06:25

answered Mar 31 '16 at 06:19

Prajwal

319
4
10

jQuery .Validate() submitHandler not working

3 Answers3