Validate fields using JQuery validation without any submit?

Question

I have a HTML5 web application with numerous user-entered fields, and I would like to do some client-side validation on those fields in javascript before sending them to the server. Easy right? Just use JQuery validation plugin --- http://jqueryvalidation.org/

But there's a catch. My web app has no forms. There is no submit anywhere in the HTML. Instead there's a JQuery change handler on every user-changeable element, and when the user changes the value of one of those element, an AJAX call is made. (This nonstandard user interaction architecture makes sense for this application.)

I would like to validate the field before the AJAX call, and use the JQuery validation plugin to do that. But I can't figure out how.

Is it possible to use the JQuery validation plugin without a submit anywhere? How would I do this? Or is another approach better?

Answer 1

Firstly, and most importantly, you must wrap your input elements inside <form></form> tags for the jQuery Validate plugin to operate. However, a submit button is not required.

Secondly, you can programatically trigger the validity test of any or all elements without a submit button by using the .valid() method.

$(document).ready(function() {      $('#myform').validate({  // initialize the plugin on your form.         // rules, options, and/or callback functions     });      // trigger validity test of any element using the .valid() method.     $('#myelement').valid();      // trigger validity test of the entire form using the .valid() method.     $('#myform').valid();      // the .valid() method also returns a boolean...     if ($('#myform').valid()) {         // something to do if form is valid     }  }); 

DEMO: http://jsfiddle.net/URQGG/

Answer 2

You will have to wrap your fields within a form to use the validation plugin and it's a good practice anyway. Also, you can invoke the plugin's validation programmatically and check if the form is valid by doing:

var $form = $('#your_form'),
    validator = $form.validate({...});

//validate the form
validator.form();

//check if the form is valid 
if ($form.valid()) {
    //form is valid
}

For more options, have a look at the docs.

Answer 3

I've created a little helper. Just add this line of code and then you can use any button anywhere.

$("body [data-submit-form]").on("click", function (event) {
    $("#" + $(event.target).data('submit-form')).valid();
});

<form id="component-form">

</form>

<button data-submit-form="component-form">Button</button>

Explanation: The jquery code listens for all clicks on an element with the attribute 'data-submit-form', in the listener the data-attribute gets extracted and then i trigger the valid method on the matching form.

NOTE: if you want to submit the form if the form is valid use this code:

$("body [data-submit-form]").on("click", function (event) {
    var form = $("#" + $(event.target).data('submit-form'));
    if (form.valid()) {
        form.submit();
    }
});