Bootstrap模式上的欧芹验证？

Question

我已经正确地将 Parsley 应用到了其他一些表单，但现在我在将它添加到简单的 Bootstrap 3 模式时遇到了问题。我有一种感觉，这与将 data-parsley-excluded 添加到字段中，然后在模式打开时以某种方式重置它们有关。这是我的相关代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Become Our Sponsor</h4>
                    <p class='small' style="margin-bottom:0px;">All fields are required.</p>
                </div>
                <div class="modal-body">
                    <form accept-charset="UTF-8" id="become-sponsor-form"  method="POST">
                        <input name="inf_form_xid" type="hidden" value="xxxxxxxx" />
                        <input name="inf_form_name" type="hidden" value="xxxxxxxx" />
                        <input name="infusionsoft_version" type="hidden" value="x.xx.x.xx" />
                        <div class="bs-callout bs-callout-warning invisible mx-auto">
                            <p>Please fill out all required fields.</p>
                        </div>
                        <div class="form-group">
                            <label for="inf_field_FirstName">First Name</label>
                            <input class="form-control" id="inf_field_FirstName" name="inf_field_FirstName" type="text" placeholder="Kevin" data-parsley-trigger='change' data-parsley-required data-parsley-excluded/>
                        </div>
                        <div class="form-group">
                            <label for="inf_field_LastName">Last Name</label>
                            <input class="form-control" id="inf_field_LastName" name="inf_field_LastName" type="text" placeholder='Bacon' data-parsley-trigger='change' data-parsley-required data-parsley-excluded/>
                        </div>
                        <div class="form-group">
                            <label for="inf_field_Email">Email</label>
                            <input class="form-control" id="inf_field_Email" name="inf_field_Email" type="email" placeholder="kevinbacon@yourcompany.com" data-parsley-type='email' data-parsley-trigger='change' data-parsley-required data-parsley-excluded/>
                        </div>
                        <div class="form-group">
                            <label for="inf_field_Phone1">Phone</label>
                            <input type="tel" class="form-control" id="inf_field_Phone1" minlength = '10' maxlength="14" data-parsley-error-message='Must be minimum of 10 digits' data-parsley-trigger='change' data-parsley-required data-parsley-excluded>
                            <input id="hidden-number" name='inf_field_Phone1' type="hidden" name="phone-full">
                        </div>
                        <div class="form-group">
                            <label for="inf_custom_CompanyType">Type of Business</label>
                            <input class="form-control" id="inf_custom_CompanyType" name="inf_custom_CompanyType" type="text" placeholder='Ecommerce, Marketing Agency, etc.' data-parsley-trigger='change' data-parsley-required data-parsley-excluded/>
                        </div>
                        <input type="submit" id="submit_button" value="Submit" class="btn btn-primary btn-block"/>
                    </form>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#become-sponsor-form').parsley().on('field:validated', function() {
            var ok = $('.parsley-error').length === 0;
            if (this.$element.hasClass('parsley-error')) {
                $('.bs-callout-warning').toggleClass('invisible', ok);

            };
        });
    });

</script>

<script type="text/javascript">
$(document).ready(function(){
    $("#submit_button").click(function(e){

            var form_data = $("#become-sponsor-form").serialize();
            e.preventDefault();

             $("#become-sponsor-form").html('<div class="loading_message text-center"><i class="fa fa-cog fa-spin fa-3x fa-fw"></i></div>');
             $.post("formaction.php", form_data, function(result){
                $("#become-sponsor-form").html('<div class="success_message alert alert-success text-center" role="alert">Thank You.. We will contact you soon...</div>');
             });

            }
         )
})
</script>

其中大部分是我尝试对其应用表单验证的遗留代码，所以我在阅读已有的内容时遇到了一些问题（我相对较新）。我确信有一种方法可以将两个脚本合并为一个干净的脚本，我只是不够先进。任何帮助将不胜感激！

编辑：忘记实际提及错误是什么。即使我没有填写任何字段，表格仍然可以提交。但是，每个单独的表单都在正确验证。 例如：它确保电子邮件地址和电话号码有效，但表单仍在提交，即使字段为空。

Answer 1

搞清楚了，以防其他人遇到这个问题！

这篇来自另一个表单验证插件的文章有点帮助：http://formvalidation.io/download/。

我最终做的是页面加载，输入data-parsley-excluded。然后在下面的脚本中，添加data-parsley-required 并删除data-parsley-excluded。我还将 data-parsley-group 应用于输入，以便能够应用 isValid 方法。

<script type="text/javascript">
    $(document).ready(function () {
        $('#become-sponsor-btn').on('click', function() {

            $("#inf_field_FirstName, #inf_field_LastName, #inf_field_Email, #inf_field_Phone1, #inf_custom_CompanyType").attr("required", true);

            $("#inf_field_FirstName, #inf_field_LastName, #inf_field_Email, #inf_field_Phone1, #inf_custom_CompanyType").removeAttr("data-parsley-excluded");

            $('#become-sponsor-form').parsley().on('field:validated', function() {
                var ok = $('.parsley-error').length === 0;
                if (this.$element.hasClass('parsley-error')) {
                    $('.bs-callout-warning').toggleClass('invisible', ok);
                };
            }); 
        });

        $("#become-sponsor-form").on('submit', function(e){
            e.preventDefault();
            $('#become-sponsor-form').parsley().on('form:validate', function (formInstance) {
                var success = formInstance.isValid({group: 'block1'});

                console.log(success);
                if (success) {
                    var form_data = $("#become-sponsor-form").serialize();

                     $("#become-sponsor-form").html('<div class="loading_message text-center"><i class="fa fa-cog fa-spin fa-3x fa-fw"></i></div>');
                     $.post("formaction.php", form_data, function(result){
                        $("#become-sponsor-form").html('<div class="success_message alert alert-success text-center" role="alert">Thank You.. We will contact you soon...</div>');
                    });

                } else {
                    e.preventDefault();
                    return false;                   
                }

            });
        });

    });


</script>