Onclick 验证表单,如果有效仅提交表单

Posted

技术标签:

【中文标题】Onclick 验证表单,如果有效仅提交表单【英文标题】:Onclick validate form, if valid only submit form 【发布时间】:2016-11-23 06:38:49 【问题描述】:

我有一个 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"] 因为处理程序只对提交按钮起作用。然后我最终在同一个表单中有两个提交按钮,并且表单无法正确提交。

请帮我纠正这个问题。回顾一下,我需要验证输入到表单中的数据并以模式请求用户确认。如果用户以模态方式确认,则表单中的数据将被提交。如果我的方法是实现此结果的不必要方法,也欢迎其他建议,只要它符合上述要求。谢谢。

【问题讨论】:

document.forms['formID'].reportValidity() 如果所有表单元素的有效性都为真,则返回真。 (对于非 jQuery 用户) 【参考方案1】:

理想情况下,我希望在表单得到验证之前停止提交。

这就是 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() 也返回一个布尔值,因此您上面代码的点击处理程序部分可以大大简化...

$('#button1').on('click', function() 
    if ($("#issueform").valid()) 
        // do something here when the form is valid
        $('#myModal').modal('toggle');
    
);

我知道您已经提到了这一点,但以下内容是为了让未来的读者受益:

请注意,您的click 处理程序是必需的,因为inputtype="button"

或者,当使用type="submit" 时,不需要您的click 处理程序,因为插件会自动捕获点击。此外,在这种情况下,您可以使用 the submitHandler option 包含在表单有效时要运行的任何代码。

【讨论】:

美丽而简单...:-) 不敢相信我错过了文档中的回报。非常感谢...

以上是关于Onclick 验证表单,如果有效仅提交表单的主要内容,如果未能解决你的问题,请参考以下文章

button 按钮,结合onclick事件,验证和提交表单

数据验证后提交表单

onsubmit表单提交简单使用

form提交,并用js验证手机号码

即使在表单活动验证状态下,如何仅在提交时验证角度表单

使用 ajax 验证 jquery / 标准 javascript 提交表单