如果第一次提交表单，则不会触发 jQuery 验证方法答案

【问题标题】：jQuery validate method is not triggered if form is submitted for the first time如果第一次提交表单，则不会触发 jQuery 验证方法
【发布时间】：2015-05-20 18:27:36
【问题描述】：

所以，我正在创建一个使用 jQuery 验证作为基础的自定义插件。我的想法是创建一个插件来验证任何普通表单，而无需为所有表单创建单独的 Jquery Validate 设置。这是我的代码

html

<form role="form" class="form-horizontal form-validate" id="" action="/action/action.users.php">
    <div class="box-body">
        <h4>Account Information</h4>
        <div class="form-group">
            <label class="col-sm-3 control-label">test</label>
            <div class="col-sm-9 controls">
                <div class="row">
                    <div class="col-xs-12">
                        <input name="txt_username" class="form-control" placeholder="Username"  value="" type="text" data-required="true">
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">test2</label>
            <div class="col-sm-9 controls">
                <div class="row">
                    <div class="col-xs-12">
                        <input name="txt_password" class="form-control" placeholder="Password" value="" type="text" data-required="true">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box-footer">
        <button class="btn btn-sm btn-primary" type="submit">Submit</button>
        <button class="btn btn-sm btn-warning" type="reset">Reset</button>
    </div>
</form>

(function ( $ ) {
    $.fn.validate_form = function(options) {
        var settings = $.extend({
                action: "/",
                redirect: "",
                notification: "",
            }, options 
        );

        var $this = this;
        var post_data = {};
        var post_response = "default";

        /* if first submit, it wont trigger this, succeeding submits, it will run this */
        $this.validate({
            submitHandler:function(){
                $this.find(':input[type="text"],:input[type="radio"],:input[type="password"],:input[type="email"]').each(function(){
                    element = $(this);
                    var name = element.attr('name');
                    var val = element.val();

                    if(element.is(':radio')) {
                        if(element.is(':checked')) 
                            post_data[name]  = val;
                    }
                    else post_data[name]  = val;
                });

                console.log(post_data);

                $.post( settings.action, post_data, function(result){
                    post_response = result;
                    console.log(result);
                });
            }
        });
        /*end if first submit, it wont trigger this */

        $this.find('[data-required="true"]').each(function(){
            $(this).rules("add",{
                required: true
            });
        }); 

        return post_response;
    }
}( jQuery ));

$(document).ready(function() {
    $(".form-validate").submit(function(e){
        var action = $(this).attr("action");
        var result = $(this).validate_form({
            action:action
        });
        e.preventDefault();
    });
});

它正在工作，除了，如果第一次提交表单，验证将不起作用，但是，如果我再次提交，它现在可以正常工作。我似乎找不到问题，因为萤火虫没有错误。任何帮助将不胜感激

【问题讨论】：

在您成功编写一个将利用 jQuery Validate 插件的插件之前，您首先需要了解应该如何使用 jQuery Validate 插件。换句话说，你显然不明白.validate()方法只是用来initialize插件。它不应该被包裹在 submit 处理程序中；这就是你问题的全部关键。我建议您仔细查看此页面：stackoverflow.com/tags/jquery-validate/info
我也不明白首先做这一切的意义，因为 jQuery Validate 插件会在没有您的插件的情况下自动获取内联 HTML 属性。 jsfiddle.net/49vt4sze
嗨@Sparky，我修复了，我用每个替换了提交，在那里自动初始化验证，而不是在提交表单时验证它。谢谢！
再说一次，我不明白您的自定义插件的全部意义。没有它也是一样的：jsfiddle.net/37qvg5z3
是的@Sparky，我同意你的观点，但我将使用高度定制的表单（使用数据属性）来控制来自服务器的响应，

标签： jquery jquery-plugins jquery-validate

【解决方案1】：

.validate() 方法仅用于初始化插件。它不应该被包装在 .submit() 处理程序中，这是解决问题的全部关键。

仔细查看此页面以了解基本设置和用法：https://stackoverflow.com/tags/jquery-validate/info

【讨论】：