表单和javascript代码

Question

下面的代码使表单无需html5验证即可提交......

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

虽然下面的代码允许html5验证在Opera浏览器中发生，但它也不起作用并且在没有验证的情况下提交（在其他浏览器中（检查firefox / chrome）验证发生）

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

我的问题是

为什么当我们将处理程序绑定到click事件而不是submit？
为什么甚至不在opera中使用提交事件类型？

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

表单和javascript代码

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

在第一个版本中，提交完全是合成的; HTML的自然形式提交过程被抑制，发生的一切都由javascript / jQuery执行。

在第二个版本中，HTML的自然形式提交过程被允许启动，但随后由javascript / jQuery以“onsubmit”处理程序拦截。

HTML5表单验证是可以理解的，是自然HTML过程的一部分，并且（之前我不知道）必须在“onsubmit”事件之前发生。

编辑：

我只能假设HTML5标准没有详细说明事件的顺序和（从你说的话）Opera的实现在这方面与其他（具有验证能力的）浏览器不同。

出于兴趣，this question的已接受答案告诉我们“您无法触发本机验证UI，但您可以轻松利用任意输入元素上的验证API”。通过使用您的第一种方法并在每个表单字段上单独触发验证，这为Opera的缺点提供了解决方法的可能性。但希望Opera能解决这个问题，所以从长远来看这不是必需的。

当使用jQuery .on（）方法按钮时单击事件而不是表单 - 提交事件时，html5表单无需验证即可提交。为什么？

表单和javascript代码

1 个答案: