Bootstrap de validation ne fonctionne pas

Je suis en train d'utiliser la validation à l'aide de bootstrap.
J'ai essayé la solution que ici mais sa ne fonctionne pas.

<form id="tryitForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Full name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="firstName" />
</div>
<div class="col-md-4">
<input type="text" class="form-control" name="lastName" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Email address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Gender</label>
<div class="col-md-6">
<div class="radio">
<label><input type="radio" name="gender" value="male" /> Male</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value="female" /> Female</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value="other" /> Other</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-8">
<button type="submit" class="btn btn-primary">Say hello</button>
</div>
</div>
</form>

J'ai ajouté bon js fichiers, veuillez voir violon lien.
Aide gentiment à savoir quel est le problème.

  • où est le bootstrap plugin file, jquery.. ne peut pas voir dans votre violon et pas dans votre post?
  • ajouté Jquery 1.8.3
  • en plus de ce que les autres ont déjà dit, le plugin jqBootstrapValidation.min.js que vous avez inclus dans votre violon n'est pas le même plugin que vous liés à la documentation. bootstrapValidator.min.js != jqBootstrapValidation.min.js Ils sont complètement différents plugins
InformationsquelleAutor xrcwrn | 2014-07-02
  1. 4

    C'est un travail jsfiddle: http://jsfiddle.net/P28nR/1/

    Les choses qui étaient manquantes ou incorrectes ont été:

    • Vous n'avez pas inclure jquery
    • Vous avez inclus le mauvais plugin jquery bootstrap. Le bon vous pouvez trouver les fichiers en cliquant sur les liens ci-dessous:

    //cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css
    //cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js

    • Vous n'avez pas d'ajouter le code javascript pour configurer et exécuter le programme de validation plugin

      $(document).ready(function() {
$('#tryitForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
}
},
submitHandler: function(validator, form, submitButton) {
var fullName = [validator.getFieldElements('firstName').val(),
validator.getFieldElements('lastName').val()].join(' ');
alert('Hello ' + fullName);
}
});
});
    • Votre violon fonctionne correctement, Mais n'affichant pas les images comme donné dans http://bootstrapvalidator.com/ pourriez-vous me dire comment faire pour inclure également l'image
    • J'ai créé une mise à jour de violon jsfiddle.net/P28nR/1 qui définit les icônes réglage de la feedbackIcons propriété de l'objet de configuration du plugin.
    • cette solution a travailler pour vous?
    • Travail perfectally
    • Je suis en train jsfiddle.net/xrcwrn/3bthv mais ce n'est pas la validation de formulaire
    • Je crois que cette question a déjà été répondu. Il est préférable de créer une autre question avec tous les détails pertinents donc, moi et les autres peuvent fournir des réponses possibles à la nouvelle question.
    • Je suis en attente de votre réponse à l'adresse stackoverflow.com/q/24972949/876739
    • J'utilise votre code. Tout fonctionne très bien. Pouvez-vous me dire comment je peux soumettre le formulaire après la validation de tous les succès? Dans votre code, après le remplissage de tous les champs correctement, le bouton soumettre devient invalide et formulaire n'est pas soumis.
    • Je viens de vérifié la dernière version du violon. jsfiddle.net/P28nR/1 il a toujours l'air bon pour moi. Le bouton "soumettre" est actif après tous les champs sont remplis. En appuyant sur le bouton soumettre affiche une alerte, mais vous pouvez modifier le submitHandler à faire ce que vous voulez.

    InformationsquelleAutor dmullings
  2. 2

    1. Vous n'avez pas de jQuery inclus. Bootstrap plugins nécessitent jQuery.

    2. Vous avez jqBootstrapValidation inclus deux fois: d'abord l'homme-version lisible, puis le minifiés un. Inclure uniquement la version compacte.

    3. L'ordre est important lors du chargement externe bibliothèques JS. Chargement de jQuery d'abord, puis de Bootstrap scripts, puis l'un des plugins supplémentaires. JS est exécuté à partir du haut vers le bas, de sorte que les dépendances doivent être chargées avant de scripts.

    InformationsquelleAutor gronostaj