jQuery validation without form tag
Asked Answered
S

1

14

I have a "form" with many inputs and at the submit button I call a javascript function that manipulate the info and send by ajax to a php file..

I can add a form tag without an action url to validate my "form" with the jquery validate? Or I have to do manually the validation?

Thanks!

Surtax answered 5/3, 2013 at 18:56 Comment(1)
I've more than fully answered your very basic question and provided working examples. If you want specific answers about why your own code is broken, you are going to have to show the code.Atomics
A
13

"I have a 'form' with many inputs and at the submit button I call a javascript function that manipulate the info and send by ajax to a php file"

It is absolutely required that you have <form></form> tags for the jQuery Validate plugin to function properly, or at all.

If you use ajax, you must put your ajax inside the submitHandler of the jQuery Validate plugin. See below for my example.

"I can add a form tag without an action url to validate my "form" with the jquery validate?"

Yes, you can remove or block the action and still use jQuery Validate.

See demo: http://jsfiddle.net/NEPsc/3/

Put your ajax and a return false in the submitHandler and no regular submission will occur:

$(document).ready(function() {

    $('#myform').validate({ // initialize plugin
        // your rules & options,
        submitHandler: function(form) {
            // your ajax would go here
            return false;  // blocks regular submit since you have ajax
        }
    });

});

EDIT:

As per OP's comments, to use a input type="button" instead of a input type="submit", you'll need to use a click handler. There is no need to have any inline JavaScript. Remove the onClick function entirely.

See updated demo: http://jsfiddle.net/NEPsc/5/

Atomics answered 5/3, 2013 at 18:58 Comment(1)
"It is absolutely required that you have <form></form> tags for the jQuery Validate plugin to function properly, or at all." This is a complete bugger when my HTML is served in an ASP.NET app and is all wrapped in a <form> tag for the codebehind stuff to work. My embedded <form> gets stripped out and isn't in the DOM when jquery has a chance to look at it.Burck

© 2022 - 2024 — McMap. All rights reserved.