文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5本机验证不适用于JQuery用户界面模型框，但使用插件的Jquery验证工作正常。

问HTML5本机验证不适用于JQuery用户界面模型框，但使用插件的Jquery验证工作正常。
EN

Stack Overflow用户

提问于 2014-06-26 03:59:31

回答 2查看 1.7K关注 0票数 1

我使用的是JQuery模型框，其中HTML5本机验证不起作用。

我的代码是这里

另外，我正在添加下面的代码。

<!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“，但有些属性是不起作用的。

我知道对于HTML5，doctype应该是!DOCTYPE HTML。我也加了这个，但运气不好。是因为UI对话框不支持HTML 5的本机验证。

jquery

html

jquery-ui

validation

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-06-26 04:30:28

它实际上是发生的，因为您的模态框的按钮没有触发HTML5验证。

不能同时使用HTML5和jQuery验证。如果您想只使用HTML5验证而仍然使用jQuery，则可以在您的情况下为您的submit()执行类似的操作，让它调用HTML5验证。

function(){
    $('#pop_up_form .submit').click();
    return false;
}

要使其工作，您需要在表单HTML中有一个隐藏的输入。

<input type="submit" class="submit" style="display:none;"></input>

小提琴

我仍然看到人们使用不支持HTML5的浏览器，您可能需要重新考虑这一点。

票数 2

Stack Overflow用户

发布于 2014-06-26 04:14:40

这是可行的，但你没有看到任何东西，因为没有默认的样式(在一些浏览器，如Chrome版本35.0.1916.153在Mac上)的错误。只要添加一些CSS就好了，我在代码中添加了一些CSS，这样您就可以明白我的意思：HTML5验证

CSS

input:required:invalid, input:focus:invalid {
  background:red;
  -moz-box-shadow: none;
}

干杯。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24422152

复制

相似问题

问HTML5本机验证不适用于JQuery用户界面模型框，但使用插件的Jquery验证工作正常。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5本机验证不适用于JQuery用户界面模型框，但使用插件的Jquery验证工作正常。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5本机验证不适用于JQuery用户界面模型框，但使用插件的Jquery验证工作正常。
EN