我的页面上有两个表单标签 - 其中一个是在bootstrap模式中。我想彼此独立地验证它们。
第一种形式 frmPO 工作正常。第二种形式 frmEmail (点击打印/电子邮件采购订单按钮) - 当我检查它是否有效时,它总是返回true。我希望Email From和Email To都是必需和 email:true 。
我已将我的页面缩短到最好,我可以展示问题JSFiddle
frmPOPrintHTML
<form id="frmEmail" action="" method="post">
<div class="modal fade printModal" id="printPOModal" tabindex="-1" role="dialog" aria-labelledby="printPOModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="printModalBody">
<iframe id="ifrPrint" src="Default.htm" style="width: 99.6%; height: 85%"></iframe>
<div class="row">
<div class="col-sm-4">
<label for="txtEmailFromPOPrint">Email From:</label>
<input class="form-control" type="text" id="txtEmailFromPOPrint" value="joe@bloggs.com"/>
</div>
<div class="col-sm-4">
<label for="txtEmailToPOPrint">Email To:</label>
<input class="form-control" type="text" id="txtEmailToPOPrint" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="btnEmail" type="button" class="btn btn-primary">Email</button>
</div>
</div>
</div>
</div>
</form>
JS
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#frmEmail").validate({
rules: {
txtEmailFromPOPrint: {
required: true,
email: true
},
txtEmailToPOPrint: {
required: true,
email: true
}
}
});
$('#btnEmail').click(function () {
if ($("#frmEmail").valid()) {
alert("valid!");
}
});
非常感谢任何帮助
答案 0 :(得分:1)
这是因为您的input
元素没有name
个属性。在rules
方法中.validate()
对象内声明的规则只能分配给输入'name
属性。
<input type="text" id="txtEmailFromPOPrint" name="txtEmailFromPOPrint" ... />
<input type="text" id="txtEmailToPOPrint" name="txtEmailToPOPrint" ... />
DEMO:http://jsfiddle.net/pb52uc0h/2/
$("#frmEmail").validate({
rules: {
txtEmailFromPOPrint: { // <- NAME attribute
required: true,
email: true
},
txtEmailToPOPrint: { // <- NAME attribute
required: true,
email: true
} ....