我有一个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>
issueValidation.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:我将提交按钮放在表单标签内的模式类中,以便单击时提交表单数据。
理想情况下,我想在表单通过验证之前停止提交。如果表单有效,我必须能够在模式中查看我的表单数据,然后单击表单上的“提交”按钮,从而进行“从”提交。
我尝试在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');
}
});
As per docs,
.valid()
也返回一个 bool 值,因此可以大大简化上面代码的单击处理程序部分。$('#button1').on('click', function() {
if ($("#issueform").valid()) {
// do something here when the form is valid
$('#myModal').modal('toggle');
}
});
我知道您已经提到了这一点,但是以下内容是为了将来的读者所受益:
请注意,仅因为
click
是input
,才需要type="button"
处理程序。另外,当使用
type="submit"
时,不需要您的click
处理程序,因为插件会自动捕获点击。同样,在这种情况下,您将使用the submitHandler
option包含任何在表单有效时要运行的代码。关于jquery - Onclick验证表单,如果有效,则仅提交表单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38474259/