Parsley Validierung auf einem Bootstrap modal?

Question

Ich habe bereits Parsley auf ein paar andere Formen angewendet, aber jetzt habe ich ein Problem, es zu einem einfachen Bootstrap 3 Modal hinzuzufügen. Ich habe das Gefühl, dass es etwas mit dem Hinzufügen von Daten zu tun hat - Petersilie-ausgeschlossen in den Feldern und dann irgendwie zurückgesetzt werden, wenn das Modal offen ist. Hier ist mein entsprechender Code:

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

Vieles davon ist Legacy-Code, ich versuche Form Validierung, anzuwenden so dass ich ein paar Probleme mit der Lektüre, was schon da war (ich bin relativ neu). Ich bin mir sicher, dass es eine Möglichkeit gibt, die beiden Skripte zu einem sauberen Skript zusammenzufassen, ich bin einfach nicht weit genug fortgeschritten. Jede Hilfe würde sehr geschätzt werden!

Edit: Vergessen, tatsächlich zu erwähnen, was der Fehler ist. Das Formular kann immer noch gesendet werden, auch wenn ich keine der Felder ausfülle. Jedes einzelne Formular wird jedoch korrekt validiert. Beispiel: Es stellt sicher, dass die E-Mail-Adresse und die Telefonnummern gültig sind, das Formular wird jedoch auch bei leeren Feldern übermittelt.

Answer 1

Haben Sie alles herausgefunden, falls jemand anderes über dieses Problem läuft!

Dieser Artikel von einem anderen Formular Validierung Plugin half ein wenig: http://formvalidation.io/download/.

Was ich getan habe, war beim Laden der Seite, geben Sie die Eingaben data-parsley-excluded. Fügen Sie dann im unten stehenden Skript data-parsley-required hinzu und entfernen Sie data-parsley-excluded. Ich habe auch Daten-Petersilien-Gruppe auf die Eingaben angewendet, um die isValid-Methode anwenden zu können.

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