ブートストラップモードでのパーズリー検証？

Question

私はParsleyを他のいくつかのフォームに正しく適用しましたが、今は単純なBootstrap 3モーダルに追加する際に問題があります。私はそれがフィールドにデータを追加することと関係していると感じています。そして、モーダルが開いているときに何らかの形でそれらがリセットされています。ここに私の関連するコードです：この

<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> 

多くは、私は、フォームの検証を適用しようとしているレガシーコードであるので、私は（私は比較的新しいです）がすでにあったものを読んでいくつかの問題を抱えています。私は、2つのスクリプトを1つのクリーンなスクリプトに統合する方法があると確信しています。どんな助けでも大歓迎です！

編集：エラーが実際に何か言及するのを忘れました。フォームは、フィールドのいずれにも記入しなくても送信することができます。しかし、個々のフォームは正しく検証されています。 例：電子メールアドレスと電話番号が有効であることを確認しますが、フィールドは空欄でも依然として送信されます。

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>