Validation de formulaire avec Bootstrap (jQuery)

Quelqu'un peut-il m'aider s'il vous plaît avec ce code? J'utilise bootstrap pour le formulaire et j'essaie de le valider avec jQuery. Malheureusement, la validation de formulaire ne me dit pas ce que je fais de mal. J'ai obtenu le script de http://jqueryvalidation.org/documentation/ et suivi un tutoriel pour la validation côté client.Validation de formulaire avec 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>

Source

2013-08-18 user2693351

Votre code a été configuré sur jsFiddle pour essayer de diagnostiquer le problème.

http://jsfiddle.net/5WMff/

Cependant, je ne semble pas rencontrer votre problème. Pourriez-vous jeter un coup d'œil et nous le faire savoir?

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'); 
    } 
}); 
});

Source

2013-08-18 06:40:51

Il s'avère que mon problème était que je n'ai pas appelé le document javascript externe correctement. Merci de votre aide! (De plus, j'ai essayé d'obtenir mon CSS personnalisé là-bas mais bootstrap.css a continué de surcharger style.css J'ai finalement obtenu ce corrigé.) – user2693351

Merci pour cette réponse Cela m'a aidé à résoudre mon problème. –

S'il vous plaît essayer après le retrait de divs formor essayer d'utiliser la méthode onclick sur le bouton soumettre.

Source

2013-08-18 06:31:35

enter image description here

Voici un plugin très simple et léger pour validation avec Boostrap, vous pouvez l'utiliser si vous le souhaitez: https://github.com/wpic/bootstrap.validator.js

Source

2014-01-29 07:15:45 user1079877

Ceci est incomplet et ne fonctionne pas avec les exemples inclus! –

J'ai ajouté sample.html – user1079877

Vous pouvez obtenir une autre validation sur ce tutoriel: http://twitterbootstrap.org/bootstrap-form-validation

Ils utilisent la validation JQuery.

jquery.validate.js 

jquery.validate.min.js 

jquery-1.7.1.min.js

enter image description here

Et vous obtiendrez là le code source.

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

Et Le 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'); 
        });

Voici l'exemple en direct du code: http://twitterbootstrap.org/live/bootstrap-form-validation/

Vérifiez le tutoriel complet: http://twitterbootstrap.org/bootstrap-form-validation/

heureux de codage.

Source

2014-02-03 20:35:56

Le lien vers le didacticiel semble être mort. –

Validation de formulaire avec Bootstrap (jQuery)

Répondre

Questions connexes