html5 Formular wird ohne Validierung übergeben, wenn die Methode jQuery .on() für das Ereignis "button - click" anstelle des Ereignisses "form - submit" verwendet wird. Warum?

Question

Im Folgenden Code macht Form ohne html5 Validierung ...

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

vorgelegt werden Solange wir unter Code html5 Validierung lässt geschieht aber es funktioniert auch nicht und ohne Validierung vorgelegt bekommen (in anderen Browsern in Opera-Browser (geprüft für firefox/chrom) geschieht Validierung)

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

meine Fragen

1. sind, warum dies geschieht, wenn wir Handler binden Ereignis statt klicken von vorlegen?
2. Warum nicht sogar mit Submit-Event-Typ in Oper arbeiten?

danke.

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

Form und 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 der ersten Version ist die Einreichung vollständig synthetisch; HTML's Natural Form Submission Prozess wird unterdrückt und alles, was passiert, wird von javascript/jQuery ausgeführt.

In der zweiten Version, HTML ist die natürliche Form Einreichung Prozess erlaubt zu initiieren, wird aber dann von Javascript/jQuery in der Gestalt eines "onsubmit" Handler abgefangen.

HTML5 Form Validierung ist, verständlicherweise, Teil des natürlichen HTML-Prozesses und (ich wusste das vorher nicht) muss vor dem "onsubmit" -Ereignis auftreten.

EDIT:

Ich kann nur annehmen, dass die HTML5-Standard spezifiziert nicht die Reihenfolge der Ereignisse im Detail und (von dem, was Sie sagen) Operas Implementierung unterscheidet sich in dieser Hinsicht von den anderen (Validierung-fähig) Browser .

Von Interesse, die akzeptierte Antwort auf this question sagt uns, dass "Sie nicht die native Validierung UI auslösen können, aber Sie können leicht die Vorteile der Validierung API auf beliebige Eingabeelemente nutzen". Dies bietet die Möglichkeit einer Problemumgehung für Operas Fehler, indem Sie Ihren ersten Ansatz verwenden und die Validierung für jedes Formularfeld einzeln auslösen. Aber hoffentlich wird Opera das Problem beheben, so dass dies auf längere Sicht nicht notwendig ist.