CODEWITHSUNDEEP
jqueryhtmlforms
Flatlyn
Flatlyn

Reputation: 2050

jQuery .Validate() submitHandler not working

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>

Upvotes: 0

Views: 12526

Answers (3)

Flatlyn
Flatlyn

Reputation: 2050

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>

Upvotes: 2

Prajwal
Prajwal

Reputation: 419

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.

Upvotes: -1

Miguel Trabajo
Miguel Trabajo

Reputation: 467

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

Upvotes: 1

Related Questions