Question

Can I validate a form on button click without submitting the whole form using validate plugin of jquery http://bassistance.de/jquery-plugins/jquery-plugin-validation/

this plugin works great with the form validation but actually i want to check whether text written inside a text box is an email or not and if it is an email then I have to check whether it is in my database or not if it is in my database it will give user to submit the form otherwise disable the button right now I am using validate plugin as like this:

$('#child1Email').blur(function(){
    var result=$('#frmAddChild').validate();
    alert(result);
    //if(result)
       //Ajax call to my servlet
    //else
       //Message box showing wrong  email and disabling the submit button
}); 

P.S I kept the class of the text field with id :: child1Email as email so that it will be validated as an email

<form name='frmAddChild' id='frmAddChild' action='addChild' method='post'>
     .
     .
     .
     .
     .
     <input type="text" name="child1Email" id="child1Email" class='email'/>
     .
     .
     .
     .
     .
</form>

But when I alert the result It shows [object Object]

Thanks in advance

Answer 1

Instead of doing the magic in a new code block, you can easily create your own validation rule.

something like this:

<input type="text" 
       name="child1Email" 
       id="child1Email" 
       class="email"
       />

using the jQuery Validation Plugin, you can write the custom code as:

$("form").validate({    
    rules: {      
        child1Email: {        
            required: true,        
            remote: "validate-email.jsp"      
        }    
     },
     messages: {
         child1Email: "Email is correct."   
         },
         submitHandler: function() {
             alert("Correct email!");
         },
         success: function(label) {
             label.addClass("valid").text("Valid email!")
         },
         onkeyup: false
});

the remote option will send you a GET request in this format:

validate-email.jsp?child1Email=abc%40domain.com 

where you send back true or false depending what will you want to react.

plus, you can always call the validation yourself, like:

$("form").submit(function() {

    if($("form").valid()) { 
        alert('valid form'); 
        return true; // submit automatically
    }
    else { 
        alert('form is not valid'); 
    }

    return false; // no need to submit automatically
});