2016-03-19 7 views
2

Also ich bin neu Bootstrap und bis jetzt habe ich alles funktioniert so, wie ich will. Ich habe ein Kontaktformular erstellt, das das Modal-Formular verwendet und die E-Mail über PHP mit der E-Mail-Funktion sendet.Bootstrap-Validierung funktioniert nicht bei der Formularübergabe

Ich habe ein Skript erstellt, um die Validierung auf dem Formular durchzuführen. Wenn die Validierung erfolgreich ist, möchte ich die E-Mail versenden.

Derzeit, wenn der Benutzer das leere Formular einreicht, funktioniert die Validierung nicht und die E-Mail wird gesendet.

Bitte beachten Sie, ich bin neu in der Arbeit mit Bootstrap.

HTML

<div id="ContactUs" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button> 
       <h4 class="modal-title" id="myModalLabel">Contact Us</h4> 
       <p><b>XXXX</b><br> 
        Company Phone: XXXXX 
       </p> 
       </div> 
       <form id="contactForm" method="post" action="scripts/email.php"> 
        <div class="modal-body"> 
         <div class="form-group"> 
          <label for="name">Name</label> 
          <input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here."> 
          <label for="name">Email</label> 
          <input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here."> 
          <label for="name">Subject</label> 
          <input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here."> 
          <label for="message">Message</label> 
          <textarea name="message" class="form-control" placeholder="Please enter your message here."></textarea> 
         </div> 
        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="submit" class="btn btn-primary">Submit</button> 
        </div> 
       </form> 
      </div> 
      </div> 
     </div> 

Script

$(document).ready(function() 
    { 
     $validator = $("#contactForm").validate({ 
      errorClass:'error', 
      validClass:'success', 
      errorElement:'span', 
      highlight: function (element, errorClass, validClass) { 
$(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass); 
      }, 
      unhighlight: function (element, errorClass, validClass) { 
    $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
      }, 
      rules: { 
       name: { 
        required: true, 
        minlength: 2 
       }, 
       subject: { 
        required: true, 
        minlength: 10 
       }, 
       email: { 
        required: true, 
        email: true 
       }, 
       message: { 
        required: true, 
        minlength: 10 
       } 
      }, 
      messages: { 
       name: { 
        required: '<span class="help-inline">Your name is required</span>', 
        minlength: jQuery.format('<span class="help-inline">2 chars</span>') 
       }, 
       subject: { 
        required: '<span class="help-inline">A Subject is required. 
    </span>', 
    minlength:jQuery.format('<span class="help-inline">10 characters</span>') 
       }, 
       email: { 
        required: '<span class="help-inline">Email.</span>', 
        email: '<span class="help-inline">Ex : [email protected]</span>' 
       }, 
       message: { 
        required: '<span class="help-block">Message</span>', 
        minlength: jQuery.format('<span class="help-block">10 chars</span>') 
       } 
      }, 
      submitHandler: function(form) 
      { 
       $('form').submit(function() { 
        if ($validator.numberOfInvalids() > 0) 
        { 
         $('#submit').modal('hide'); 
        } else 
        { 
         $('#submit').modal('show'); 
        } 
       }); 
      } 
     }); 
    }); 
+0

In die Eingabefelder einfach 'erforderlich' eingeben –

+0

Könnten Sie ein wenig beschreibender mit Ihrer Antwort sein? erforderlich = ""? – GhostDZ9

+0

Antwort

0

Auf jedem Eingabefeld Add 'erforderlich'. Einfache Methode, um zu gewährleisten, dass jedes Feld Daten enthält

<form id="contactForm" method="post" action="scripts/email.php"> 
         <div class="modal-body"> 
          <div class="form-group"> 
           <label for="name">Name</label> 
           <input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here." required /> 
           <label for="name">Email</label> 
           <input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here." required /> 
           <label for="name">Subject</label> 
           <input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here." required /> 
           <label for="message">Message</label> 
           <textarea name="message" class="form-control" placeholder="Please enter your message here." required /></textarea> 
          </div> 
         </div> 
         <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="submit" class="btn btn-primary">Submit</button> 
         </div> 
        </form> 
+0

Ich habe das getan und das Formular wird noch übergeben und keine Validierung erfolgt. – GhostDZ9

+0

Dann ist Ihr Skript mit der Validierung unordentlich, entfernen Sie es und validieren Sie in PHP, bevor die Mail gesendet wird. –

+0

Ich dachte darüber nach, aber ich möchte die andere Bootstrap-Validierung arbeiten, wie es optisch besser aussieht. – GhostDZ9

0

Haben Sie bereits die Jquery- und Validierungsbibliothek aufgenommen?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script> 
+0

Ja, ich habe sie. Funktioniert immer noch nicht. – GhostDZ9

Verwandte Themen