While doing web user validation, I found a wonderful JQuery Form Validation plugin: Inline Form Validation Engine 1.7.2, jQuery plugin. I like it so much and integrated it into my codes. The following are steps:

1. From the demo, it works like this:

// Load the validationEngine:
$(document).ready(function() {
  $("#formID").validationEngine()
});
// Then use it on 'formID':
<form id="formID" method="post" action="">
<input id="" name="" class="validate[required,length[6,11]]" ..../>
<input type="submit" value="Validate & Send the form!"/>
</form>

2. My form looks like this:

<form id="form1" method="post" action="javascript:void(0);">
<input id="user" name="user" type="text" onfocus="this.select();"
  class="validate[required,custom[noSpecialCaracters],length[6,20]]" />
<input type="password" name="password" id="password"
  class="validate[required,length[6,20]]" onFocus="this.select();" />
...
<input type="button" value="click to next Page"
  onclick="ajax_db_operation()"/>

The purpose of the above codes is: first validate the user input, if succ, then do ajax operation; if fail, reminder user directly without further action. Unfortunately, the user validation plugin doesn’t work on this form.

3. The demo uses ’submit’, but I use ’click’, so that’s the differnce. ’click’ event and ’submit’ event focus on different element:

• ‘click’ event doesn’t bind to ‘form’ submit event, it is just firing on a ‘click’ button or link.
• ‘submit’ event binds with a ‘form’, as well as a ‘click’ event. So when submit, it triggers 2 events: first the ‘click’ event binding with this button, then ‘submit’ event for ‘form’ which it resides inside.
• normally for a certain ‘submit’ button, ‘click’ event happens prior to a ‘submit’ event.

The original script(jquery.validationEngine.js) binds with ‘submit’ button, it implies a ’click’ event if attached.

$(this).bind("submit", function(caller){
    $.validationEngine.onSubmitValid = true;
    $.validationEngine.settings = settings;
    if($.validationEngine.submitValidation(this,settings) == false){
        if($.validationEngine.submitForm(this,settings) == true) return false;
    }else{
        settings.failure && settings.failure();
        return false;
    }
})

My codes don’t fire a ‘submit’ event, so not work. If chaning the ‘click’ to ‘sumbit’, there still a problem: by default, ’click’ fires prior to ‘submit’, that means user validation happens after ajax_db_option, it is unacceptible. Fortunatley, there is a jquery method:event.isDefaultPrevented(), it changes the sequences of events, so removes the default behavior that was triggered by this event.

4. Solution There are 2 things need to do, to correct the behaviour when click event happen: (1) change the form, using ’submit’ instead of ’click’

<input type="submit" class="submit" value="click to next Page" .../>

(2) Make sure ’click’ is ahead of ’submit’. To re-schedule the behavior, use event.preventDefault(), which prevent the default sequence. The new sequence should be:

1. validation user input (this is a submit event, happens first), and return succ or false.
2. if succ, then do ajax (this is a click event, happens last); if not, doing nothing, just reminder user.

The followng codes control the sequences and the 2 events works pretty good.

-- html:
<form id="form1">
...
<input type="submit" class="submit" />
</form>

-- javascript:
$('#form1 .submit').click(function(event){
  event.preventDefault();
  if($("#form1").validationEngine({returnIsValid:true})) {
    ajax_db_operation();
  }
  else return false;
});

This is the way to bind jquery plugin event with my ajax event.

5. For dynamic ajax loading, the form is generated by ajax operation, in such case, the following codes should be added immediately after the dynamic generated html:

$("#form1 .submit").click(function(event) {
  event.preventDefault();
  if($("#form1").validationEngine({returnIsValid:true})) {
    ajax_db_operation();
  }
});
$("#form1").validationEngine();

They work perfectly, exactly what I want.