William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

jQuery: submit event ahead of click event

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:


<script language="javascript" type="text/javascript">
$("#form1 .submit").click(function(event) {
  event.preventDefault();
  if($("#form1").validationEngine({returnIsValid:true})) { 
    ajax_db_operation();
  }
});
$("#form1").validationEngine();
</script>

They work perfectly, exactly what I want.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: