下面的代码使表单在没有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事件而不是提交时会发生这种情况
- 为什么不在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>
在第一个版本中，提交完全是合成的；HTML的自然表单提交过程被抑制，所有发生的事情都由javascript/jQuery执行。
在第二个版本中，HTML的自然表单提交过程被允许启动，但随后被javascript/jQuery以"onsubmit"处理程序的形式截获。
可以理解，HTML5表单验证是自然HTML过程的一部分，（我以前不知道）必须在"onsubmit"事件之前进行。
编辑：
我只能假设HTML5标准没有详细指定事件的顺序，并且（从你所说的）Opera的实现在这方面与其他（支持验证的）浏览器不同。
出于兴趣，这个问题的公认答案告诉我们，"你不能触发原生验证UI，但你可以很容易地利用对任意输入元素的验证API"。这为Opera的缺点提供了一种变通方法，方法是使用第一种方法并单独触发每个表单字段的验证。但希望Opera能解决这个问题，这样从长远来看就没有必要了。