html5 form get submitted without validation when using jQuery .on() method for button - click event rather than form - submit event. why?

Question

Below code makes form to be submitted without html5 validation...

$j(document).on("click", "#client_entry_add", function(event){ ajax_submit();});

While below code lets html5 validation happening BUT in opera browser it also doesn't work and get submitted without validation(in other browsers(checked for firefox/chrome) validation happens)

$j(document).on("submit", "#client_entry_form", function(event){ ajax_submit();});

my questions are

1. why this happens when we bind handler to click event instead of submit ?
2. why even not working with submit event type in opera?

thank you.

==================================================================================

form and javascript code

function ajax_CALL(OBJECT , URL , PARAMS , TARGET)
{//alert ('in for -> ' + URL);
if (typeof OBJECT != 'undefined' && OBJECT != null )
{   
    if( $j('#'+OBJECT).length ){OBJECT = $j('#'+OBJECT);}
    else
    if(  $j('.'+OBJECT).length ){OBJECT = $j('.'+OBJECT);}

    var ObjName  = OBJECT.attr("name");
    var ObjValue  = OBJECT.val();

    var ob_defined = true;
}

if ((typeof PARAMS == 'undefined' || PARAMS == null) && ob_defined)
{
    var PARAMS = ObjName+'='+ObjValue;// set params to pass via ajax call
}


$j.ajax({
   type: "POST",
   url: URL,
   data: PARAMS,  //"name=John&location=Boston",$j('#ContactForm').serialize()
   success: function(responseText){
//////////////////////////////////////
//hide the progress bar
//////////////////////////////////////
$j('#loading').hide();   
//////////////////////////////////////
if (typeof TARGET != 'undefined' )
{
if($j('#'+TARGET).length){TARGET = $j('#'+TARGET);}//if id
else
if($j('.'+TARGET).length){TARGET = $j('.'+TARGET);}//if class
                                            TARGET.html(responseText);
                                            //show TARGET div and display the content with fadeIn transition
                                            TARGET.fadeIn(250);
                                            //$j(TARGET).html(responseText);
                                            //display the body with fadeIn transition
                                            //$j(TARGET).fadeIn(250);       
           }
        }
    }); 
}
/*********************************************************/
$j(document).ready(function(){

    //$j(document).on("click", "#client_entry", function(event)
$j(document).on("submit", "#client_entry_form", function(event){
    //alert('ohh hhh yes :)');return false;
    //prevent default
    event.preventDefault();

    //hide the middle content and show the loading progress animation
    show_hide();

    var OBJECT = null;
    var URL = $j('#client_entry_form').attr('action');
    var PARAMS = $j('#client_entry_form').serialize();
    var TARGET = 'middle_content';
///////////////////////////////////////////////////////////////////////////////////////////
    //run ajax
    ajax_CALL(OBJECT , URL , PARAMS , TARGET);      

    //cancel the anchor tag behaviour or any other default event/trigger
    if(!event.isDefaultPrevented())
    return false;

    });
})
======================================
html5 form
<div id="client_entry_form_div">
<form action="client_entry_action.php" method="post" id="client_entry_form" name="client_entry_form" >

<fieldset id="client_info_1">   

    <label for="c_name">Name:</label> 
    <input type="text" name="c_name" required placeholder="Name" autofocus="autofocus" />

    <label for="c_phone">Phone Number:</label> 
    <input type="tel" name="c_phone" required placeholder="Mobile/Phone Number" />

    <label for="c_email">Email:</label> 
    <input type="email" name="c_email" placeholder="email@example.com" />

    <label for="c_address">Address:</label> 
    <textarea name="c_address" ></textarea>

</fieldset>

<fieldset id="client_info_2">   

    <label for="c_info">Additional notes:</label> 
    <textarea name="c_info" ></textarea>

    <input type="hidden" name="client_entry" value="add" />
    <input type="submit" name="client_entry_add" value="Add Client" id="client_entry_add" />

</fieldset>
</form>
</div>

Answer 1

In the first version, submission is entirely synthetic; HTML's natural form submission process is suppressed and everything that occurs is performed by javascript/jQuery.

In the second version, HTML's natural form submission process is allowed to initiate but is then intercepted by javascript/jQuery in the guise an "onsubmit" handler.

HTML5 form validation is, understandably, part of the natural HTML process and (I didn't know this before) must occur prior to the "onsubmit" event.

EDIT:

I can only assume that the HTML5 standard does not specify the order of events in detail and (from what you say) Opera's implementation is different in this regard from the other (validation-capable) browsers.

Out of interest, the accepted answer to this question tells us that "you can't trigger the native validation UI, but you can easily take advantage of the validation API on arbitrary input elements". This offers the possibility of a workaround for Opera's shortcoming, by using your first approach and triggering validation on each form field individually. But hopefully Opera will fix the problem so this is not necessary in the longer term.