Formularüberprüfung mit Bootstrap (jQuery)

Kann mir bitte jemand mit diesem Code helfen? Ich benutze Bootstrap für das Formular und versuche es mit jQuery zu validieren. Leider sagt mir die Formularvalidierung nicht, was ich falsch mache. Ich habe das Skript von http://jqueryvalidation.org/documentation/ und folgte einem Tutorial für die clientseitige Validierung.Formularüberprüfung mit Bootstrap (jQuery)

<!DOCTYPE html> 

<html> 
<head> 
     <meta charset="utf=8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script src="js/jquery.validate.min.js"></script> //Script found online 

     <script> 
      $(document).ready(function(){ 

      $('#contact-form').validate(
      { 
       rules: { 
       name: { 
        minlength: 2, 
        required: true 
       }, 
       email: { 
        required: true, 
        email: true 
       }, 
       message: { 
        minlength: 2, 
        required: true 
       } 
       }, 
       highlight: function(element) { 
       $(element).closest('.control-group').removeClass('success').addClass('error'); 
       }, 
       success: function(element) { 
       element 
       .text('OK!').addClass('valid') 
       .closest('.control-group').removeClass('error').addClass('success'); 
       } 
      }); 
      }); // end document.ready 
     </script> 

    </head> 

    <div class="hero-unit"> 
     <h1>Contact Form</h1> </br> 

    <form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form"> 
     <div class="control-group"> 
      <label class="control-label" for="name">Name</label> 
      <div class="controls"> 
       <input type="text" name="name" id="name" placeholder="Your name"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="email">Email Address</label> 
      <div class="controls"> 
       <input type="text" name="email" id="email" placeholder="Your email address"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="subject">Subject</label> 
      <div class="controls"> 
        <select id="subject" name="subject"> 
         <option value="na" selected="">Choose One:</option> 
         <option value="service">Feedback</option> 
         <option value="suggestions">Suggestion</option> 
         <option value="support">Question</option> 
         <option value="other">Other</option> 
        </select> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="message">Message</label> 
      <div class="controls"> 
       <textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea> 
      </div> 
     </div> 
     <div class="form-actions"> 
      <input type="hidden" name="save" value="contact"> 
      <button type="submit" class="btn btn-success">Submit Message</button> 
      <button type="reset" class="btn">Cancel</button> 
     </div> 
    </form> 

</div> 

     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
     <script src="js/bootstrap.js"></script> 


    </body>

Quelle

2013-08-18 user2693351

Ich hatte Ihren Code-Setup auf jsFiddle, um das Problem zu diagnostizieren.

http://jsfiddle.net/5WMff/

Allerdings scheine ich nicht Ihr Problem zu begegnen. Könnten Sie einen Blick darauf werfen und uns wissen lassen?

HTML

<div class="hero-unit"> 
<h1>Contact Form</h1> 
</br> 
<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form"> 
    <div class="control-group"> 
     <label class="control-label" for="name">Name</label> 
     <div class="controls"> 
      <input type="text" name="name" id="name" placeholder="Your name"> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="email">Email Address</label> 
     <div class="controls"> 
      <input type="text" name="email" id="email" placeholder="Your email address"> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="subject">Subject</label> 
     <div class="controls"> 
      <select id="subject" name="subject"> 
       <option value="na" selected="">Choose One:</option> 
       <option value="service">Feedback</option> 
       <option value="suggestions">Suggestion</option> 
       <option value="support">Question</option> 
       <option value="other">Other</option> 
      </select> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="message">Message</label> 
     <div class="controls"> 
      <textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea> 
     </div> 
    </div> 
    <div class="form-actions"> 
     <input type="hidden" name="save" value="contact"> 
     <button type="submit" class="btn btn-success">Submit Message</button> 
     <button type="reset" class="btn">Cancel</button> 
    </div> 
</form>

Javascript

$(document).ready(function() { 

$('#contact-form').validate({ 
    rules: { 
     name: { 
      minlength: 2, 
      required: true 
     }, 
     email: { 
      required: true, 
      email: true 
     }, 
     message: { 
      minlength: 2, 
      required: true 
     } 
    }, 
    highlight: function (element) { 
     $(element).closest('.control-group').removeClass('success').addClass('error'); 
    }, 
    success: function (element) { 
     element.text('OK!').addClass('valid') 
      .closest('.control-group').removeClass('error').addClass('success'); 
    } 
}); 
});

Quelle

2013-08-18 06:40:51

Es stellte sich heraus, dass ich das externe Javascript-Dokument nicht korrekt aufgerufen habe. Danke für Ihre Hilfe! (Ich habe auch versucht, mein eigenes CSS zu bekommen, aber bootstrap.css hat style.css überschrieben. Ich habe das Problem behoben.) – user2693351

Danke für diese Antwort Es half mein Problem zu lösen. –

Bitte versuchen Sie es nach dem Einschalten Submit-Button Onclick-Methode zu verwenden Entfernen divs aus ForMor zu versuchen.

Quelle

2013-08-18 06:31:35

enter image description here

Hier ist ein sehr einfaches und leichtes Plug-In für Validierung mit Bootstrap, können Sie es verwenden, wenn Sie mögen: https://github.com/wpic/bootstrap.validator.js

Quelle

2014-01-29 07:15:45 user1079877

Dies ist unvollständig und funktioniert nicht mit den mitgelieferten Beispielen! –

Ich habe sample.html – user1079877

Sie eine weitere Validierung auf diesem Tutorial erhalten können: http://twitterbootstrap.org/bootstrap-form-validation

Sie verwenden JQuery Validierung.

jquery.validate.js 

jquery.validate.min.js 

jquery-1.7.1.min.js

enter image description here

Und Sie werden den Quellcode dort ankommen.

<form id="registration-form" class="form-horizontal"> 
<h2>Sample Registration form <small>(Fill up the forms to get register)</small></h2> 
<div class="form-control-group"> 
     <label class="control-label" for="name">Your Name</label> 
<div class="controls"> 
      <input type="text" class="input-xlarge" name="name" id="name"></div> 
</div> 
<div class="form-control-group"> 
     <label class="control-label" for="name">User Name</label> 
<div class="controls"> 
      <input type="text" class="input-xlarge" name="username" id="username"></div> 
</div> 
<div class="form-control-group"> 
     <label class="control-label" for="name">Password</label> 
<div class="controls"> 
      <input type="password" class="input-xlarge" name="password" id="password"> 

</div> 
</div> 
<div class="form-control-group"> 
      <label class="control-label" for="name"> Retype Password</label> 
<div class="controls"> 
       <input type="password" class="input-xlarge" name="confirm_password" id="confirm_password"></div> 
</div> 
<div class="form-control-group"> 
      <label class="control-label" for="email">Email Address</label> 
<div class="controls"> 
       <input type="text" class="input-xlarge" name="email" id="email"></div> 
</div> 
<div class="form-control-group"> 
      <label class="control-label" for="message">Your Address</label> 
<div class="controls"> 
       <textarea class="input-xlarge" name="address" id="address" rows="3"></textarea></div> 
</div> 
<div class="form-control-group"> 
      <label class="control-label" for="message"> Please agree to our policy</label> 
<div class="controls"> 
      <input id="agree" class="checkbox" type="checkbox" name="agree"></div> 
</div> 
<div class="form-actions"> 
      <button type="submit" class="btn btn-success btn-large">Register</button> 
      <button type="reset" class="btn">Cancel</button></div> 
</form>

And The JQuery:

<script src="assets/js/jquery-1.7.1.min.js"></script> 

<script src="assets/js/jquery.validate.js"></script> 

<script src="script.js"></script> 
<script> 
      addEventListener('load', prettyPrint, false); 
      $(document).ready(function(){ 
      $('pre').addClass('prettyprint linenums'); 
        });

ist das Live-Beispiel für den Code: http://twitterbootstrap.org/live/bootstrap-form-validation/

überprüfen Sie die vollständigen Tutorial: http://twitterbootstrap.org/bootstrap-form-validation/

glücklich Codierung.

Quelle

2014-02-03 20:35:56

hinzugefügt Der Link zum Tutorial scheint tot zu sein. –

Formularüberprüfung mit Bootstrap (jQuery)

Antwort

Verwandte Themen