jQuery validation plugin multiple forms

Question

I'm trying to add some functionality to a series of forms to validate two checkboxes. I'm using the jQuery validation plugin and for the life of me can't get it working. In fiddle I just get a 403 forbidden message when I submit it. On my actual site it looks like its never even executed.

HTML - These forms are multiple and identical per page. Stackoverflow only lets me show one though

<form method="post" id="offer" name="offer" action="#" class="offer">
    <input type="text" name="original_description">
    <input type="text" name="description">
    <input type="text" name="added_by">
    <input type="submit" id="add" value="add" class="submit">
</form>

JS

$(".offer").each(function () {
    $(this).validate({
        submitHandler: function (form) {
            var x = form.find('input[name=description]').val();
            var y = form.find('input[name=original_description]').val();
            var z = similar_text(x, y, 1);
            alert("Description: " + x + " original_description: " + y + " z: " + z)
            if (z > 50 && !isNaN(z)) {
                alert("Description too similar to original. Please make it less similar");
                return false;
            }
            form.submit();
        },
        rules: {
            added_by: {
                required: true
            }
        },
        messages: {
            added_by: {
                required: 'Please select your name'
            }
        }
    });
});

there is a typo, preventing your script from being executed. It is just before "rules:" missing a ',' to separate properties — jbl, Oct 22 '13 at 15:29
@jbl thanks have added the ',' and found another typo. Still doesn't function however, still get a `CSRF verification failed. Request aborted.` error from fiddle — KingFu, Oct 22 '13 at 15:39
I'm not sure jsfiddle allows post requests on itself. You should now try with your local code — jbl, Oct 22 '13 at 15:42
and you should manipulate a jquery object : see http://jsfiddle.net/PzKC4/55/ — jbl, Oct 22 '13 at 15:44
Thanks have tried in my local code, doesn't look like it ever gets executed as none of the alerts fire — KingFu, Oct 22 '13 at 15:48
@jbl ah perfect, changing `form` to `$(form)` did the trick. If you want to put it as an answer I'll accept it — KingFu, Oct 22 '13 at 15:53

score 2 · Accepted Answer · answered Oct 22 '13 at 15:59

As stated in the comments, you should add a ',' before rules:, and manipulate a jquery form object in your submitHandler, like this :

$(".offer").each(function () {
    $(this).validate({
        submitHandler: function (form) {
            var x = $(form).find('input[name=description]').val();
            var y = $(form).find('input[name=original_description]').val();
            var z = similar_text(x, y, 1);
            alert("Description: " + x + " original_description: " + y + " z: " + z)
            if (z > 50 && !isNaN(z)) {
                alert("Description too similar to original. Please make it less similar");
                return false;
            }
            form.submit();
        },
        rules: {
            added_by: {
                required: true
            }
        },
        messages: {
            added_by: {
                required: 'Please select your name'
            }
        }
    });
});

jQuery validation plugin multiple forms

1 Answers1

Linked

Related