use*_*963 7 forms jquery jquery-validate bootstrap-modal
我有一个 html 表单，我首先希望使用 jQuery 验证库 jquery.validate.min.js 进行验证，如果表单有效，请将表单提交到某个位置。
我尝试了以下方法：
<html>
<head>
<link rel="stylesheet" href="../../common/view/css/bootstrap.min.css" type="text/css">
<script src="../../common/view/js/jquery.js"></script>
<script src="../../common/view/js/bootstrap.min.js"></script>
<script src="../../common/view/js/jquery.validate.min.js"></script>
</head>
<body>
<form method="post" action="stock-c.php" id="issueform" name="issueform">
<input type="text" name="pid"/>
<input type="button" name="button1" id="button1"/>
<script type="text/javascript" src="js/issueValidation.js"></script>
<!--Modal-->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!--info to be displayed-->
<input type="submit" value="submit"/> <!--Explain1-->
</div>
</div>
</from>
</body>
</html>
问题验证.js
$( document ).ready( function () {
$validator= $( "#issueform" ).validate( {
rules: {
pid: "required",
},
messages: {
pid: "Please enter a value",
},
errorElement: "em",
errorPlacement: function ( error, element ) {
// Add the `help-block` class to the error element
error.addClass( "help-block" );
if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
},
highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
},
unhighlight: function (element, errorClass, validClass) {
$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
}
});
$('#button1').on('click', function() {
$("#issueform").valid(); //everything works upto here
if($validator.noOfInvalids()===0){ //this code doesn't work
$('#myModal').modal('toggle');
}
});
});
说明 1：我将提交按钮放在表单标签内的模态类中，以便在单击时提交表单数据。
理想情况下，我想在表单得到验证之前停止提交。如果表单有效，我必须能够在模态中查看我的表单数据并单击其上的提交按钮，从而使 from 提交。
我尝试使用 jQuery 验证插件中的 submitHandler（仅在表单中没有无效项时才执行）来初始化模态，但要做到这一点，我需要将 input[type="button"] 更改为 input[type="submit "] 因为处理程序仅适用于提交按钮。然后我最终在同一个表单中有两个提交按钮，并且表单没有正确提交。
请帮我纠正这个问题。回顾一下，我需要验证输入到表单中的数据，并以模式请求用户确认。如果用户以模态确认，则提交表单中的数据。如果我的方法是实现此结果的不必要方法，只要符合上述要求，也欢迎其他建议。谢谢你。
理想情况下，我想停止提交，直到表单得到验证。
这就是 jQuery Validate 插件已经在做的事情。
你的代码...
$('#button1').on('click', function() {
$("#issueform").valid(); //everything works upto here
if($validator.noOfInvalids()===0){ //this code doesn't work
$('#myModal').modal('toggle');
}
});
根据文档，.valid()它还返回一个布尔值，因此上面代码的点击处理程序部分可以大大简化......
$('#button1').on('click', function() {
if ($("#issueform").valid()) {
// do something here when the form is valid
$('#myModal').modal('toggle');
}
});
我知道您已经提到过这一点，但以下内容是为了未来的读者：
请注意，您的click处理程序是必需的，只是因为它input是一个type="button".
或者，当使用 a 时type="submit"，click不需要您的处理程序，因为点击是由插件自动捕获的。另外，在这种情况下，您可以使用该submitHandler选项来包含表单有效时要运行的任何代码。
| 归档时间： |
|
| 查看次数： |
19519 次 |
| 最近记录： |