Jquery form submit validation

Question

I have following form:

<form id="testForm" action="country_Save">
   Country Name:<input type="text" id="countryName" />  
   <input type="submit" id='saveCountry' value="Add Country" />
</form>

and following JQuery for validating textfield

$('#testForm')
   .jqxValidator({  rules : [
          {
              input : '#countryName',
              message : 'Country Name is required!',
              action : 'keyup, blur',
              rule : 'required'
          }],
          theme : theme
});

How can i use this validation when I am submitting a form?

Answer 1

Try this please:

     $('#testForm').on('submit', function() {
         return $('#testForm').jqxValidator('validate');
     });

Answer 2

Bind a function to the submit event of the form. Return false in this function if any of the form fields fail validation.

For example:

$('form').on('submit', function() {
    // do validation here
    if(/* not valid */)
        return false;
});

Answer 3

Form validation have a wide set of Javascript and jQuery libraries... My sugestion is a simple jquery.com plugin.

PS: jqxValidator is a method from the jQWidgets framework? if you (reader) not need so heavy/complex plugin, see bellow pure jQuery, else @Gajotres writed the best solution (!).

---

Using only jQuery and basic Javascript.

For both, "plug library" and "writing your own validation methods", first check if the direct use of jQuery is what you need.

Here a code that do all what the question say to need: validation on blur, keyup and "when submitting".

function validate(){
    var cnv = $('#countryName').val();
    if (!$.trim(cnv)) {
        alert('Country Name is required!');
        return false;
    } else { return true; }
}

$('#testForm').submit(validate);
$('#countryName').bind('blur keyup', validate);