点击验证表格，如果有效只提交表格 [英] Onclick validate form, if valid only submit form
问题描述
我有一个html表单，我首先希望使用jQuery验证库jquery.validate.min.js进行验证，如果表单有效，则 ，将表单提交到位置。
我曾尝试以下方法：
< html>
< head>
< link rel =stylesheethref =../../ common / view / css / bootstrap.min.csstype =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 =postaction =stock-c.phpid =issueformname =issueform>
< input type =textname =pid/>
< input type =buttonname =button1id =button1/>
< script type =text / javascriptsrc =js / issueValidation.js>< / script>
<！ - Modal - >
< div id =myModalclass =modal faderole =dialog>
< div class =modal-dialog>
<！ - 要显示的信息 - >
< input type =submitvalue =submit/> <！ - Explain1 - >
< / div>
< / div>
< / from>
< / body>
< / html>
issueValidation.js
$（document）.ready（function（）{
$ validator = $（#issueform）.validate（{
rules：{
pid：required ，
}，
消息：{
pid：请输入一个值，
}，
errorElement：em，
errorPlacement：函数（error，element）{
//向错误元素添加`help-block`类
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（ 成功）;
}，
unhighlight：function（element，errorClass，validClass）{
$（element）.parents（.col-sm-5）.addClass（has-success） .removeClass（has-error）;
}
}）; $（$＃
$（'＃button1'）。on（'click'，function（）{
$（＃issueform）。valid（）; //一切工作到这里
if（$ validator.noOfInvalids（）=== 0）{//此代码无效
$（'＃myModal'）。modal（'toggle'）;
}
}）;
}）;
解释1：我将提交按钮放置在模态类中表单标签，所以当点击表单数据被提交。
理想情况下，我想暂停提交，直到表单被验证。如果表单有效，我必须能够检查我的表单数据，并点击提交按钮，从而提交。
我尝试使用submitHandler在jQuery验证插件（只有当表单中没有invalids时才会执行）来初始化模态，但要做到这一点，我需要将输入[type =button]更改为输入[type =submit]，因为处理程序仅适用于提交按钮。然后，我最终得到两个提交按钮在同一个表单中，并且表单不能正确提交。
请帮我解决这个问题。作为一个回顾，我需要验证输入到表单的数据并请求模式中的用户确认。如果用户以模式确认，表单中的数据将被提交。如果我的方法是实现这一结果的不必要的方法，那么只要符合上述要求，也可以采用其他方法。感谢您。
理想情况下，我希望在表单验证前停止提交。
这就是jQuery Validate插件已经在做的事情。
您的代码... < /'>
$（'＃button1'）。on（'click'，function（）{
$（＃issueform ）.valid（）; //一切工作到这里
if（$ validator.noOfInvalids（）=== 0）{//这段代码不起作用
$（'＃myModal'） .modal（'toggle'）;
}
}）;
根据文档， .valid（）也返回一个布尔值，所以上面的代码中的click处理程序部分可以大大简化......
$ $ $ $ $'code $（'＃button1'）。on（'click'，function（）{
if（$（＃issueform ）.valid（））{
//当表单有效时做些事$ b $（'＃myModal'）。modal（'toggle'）;
}
} ）;
我知道您已经提到过这一点，但以下是为了未来读者的利益：
请注意，您的点击处理程序仅仅是因为输入是 type =button。
或者，当使用 type =submit时，您的点击处理程序，因为插件会自动捕获该点击。另外，在这种情况下，您可以使用 submitHandler 选项包含任何代码以在表单有效时运行。
I have an html form that I first wish to validate with jQuery validation library jquery.validate.min.js and if form is valid, submit the form to a location.
I have attempted the following:
<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');
}
});
});
Explain1: I placed my submit button in the modal class which is within the form tags, so that when clicked the form data gets submitted.
Ideally I want to halt submission until form is validated. If the form is valid I must be able to review my form data in the modal and click the submit button on it, thereby making the from submit.
I tried using the submitHandler in jQuery validation plugin (which executes only when there are no invalids in the form) to initialize the modal, but to do that I need to change input[type="button"] to input[type="submit"] since the handler works only on the submit button. Then I end up with two submit buttons in the same form and the form doesn't submit properly.
Please help me rectify this issue. As a recap, I need to validate data entered to a form and request confirmation from user in a modal. If user confirms in modal, the data in the form gets submitted. If my method is an unnecessary method to achieve this outcome, alternative suggestions are also welcome as long as it conforms to the the requirement stated above. Thank You.
Ideally I want to halt submission until form is validated.
That's what the jQuery Validate plugin is already doing.
Your code...
$('#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() also returns a boolean, so the click handler part of your code above can be simplified greatly...
$('#button1').on('click', function() {
if ($("#issueform").valid()) {
// do something here when the form is valid
$('#myModal').modal('toggle');
}
});
I know you already mentioned this, but the following is for the benefit of future readers:
Please note that your click handler is required only because the input is a type="button".
Alternatively, when using a type="submit", your click handler is not needed because the click is automatically captured by the plugin. Also, in that case, you would use the submitHandler option to contain any code to run when the form is valid.
这篇关于点击验证表格，如果有效只提交表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
