[英]HTML 5 native validation is not working in JQuery UI model box but Jquery validation using plugin is working
我使用的是HTML 5本機驗證無法正常工作的JQuery模型框。
我的代碼在這里
我還要在下面添加代碼。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Open Dialog </title>
<link rel="stylesheet" href="../css/jquery-ui.css" />
<link rel="stylesheet" href="../css/style.css" />
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui.js"></script>
<script type="text/javascript" src="../scripts/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
//$('#pop_up_form').validate();
$("#popup").dialog({
autoOpen: true,
title : "View/Edit Screen",
dialogClass : "pop-content pop-header-colr pop-button pop-float",
width:400,
height:450,
modal: true,
resizable: false,
show: 'clip',
buttons:{
'SUBMIT':function(){
/*if($('#pop_up_form').valid())
{
alert("successfull");
}*/
}
}
});
});
</script>
</head>
<body>
<div id="popup" style="display:none">
<form action="" name="pop_up_form" id="pop_up_form" method="post"><input class="pop_up_textbox" type="text" name="acct_nmbr" id="acct_nmbr" required maxlength="19" value=""/></form>
</div>
</body>
</html>
在這里，如果您取消注釋我評論過的那些jquery代碼，則可以看到Jquery驗證工作正常。 但是，如果我評論Jquery驗證代碼，為什么HTML5驗證在這里不起作用。 為了測試HTML 5驗證，我為表單字段添加了“ required”屬性，但有些方法不起作用。
我知道對於HTML 5 doctype應該是!DOCTYPE HTML 。 我也添加了這個但沒有運氣。 是因為UI對話框不支持HTML 5本機驗證。
這實際上是由於模態框的按鈕不會觸發HTML5驗證而發生的。
您不能同時使用HTML5和jQuery驗證。 如果您想在仍使用jQuery的情況下僅進行HTML5驗證，則可以針對您的情況對submit()執行類似的操作，以使其稱為HTML5驗證。
function(){
$('#pop_up_form .submit').click();
return false;
}
為此，您需要在表單HTML中有一個隱藏的輸入
<input type="submit" class="submit" style="display:none;"></input>
我仍然看到有人使用不支持HTML5的瀏覽器，您可能需要重新考慮一下。
它正在運行，但是您什么也看不到，因為沒有默認樣式（ 在某些瀏覽器中，例如Mac上的Chrome版本35.0.1916.153 ），該錯誤不會出現。 只需添加一些CSS，這將是一件好事，我在您的代碼中添加了一些CSS，以便您可以了解我的意思： HTML5驗證
CSS
input:required:invalid, input:focus:invalid {
background:red;
-moz-box-shadow: none;
}
干杯。
Jquery驗證插件在Jquery ui自定義對話框中不起作用
[英]Jquery Validation Plugin not working in Jquery ui custom dialog box
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.