Utilisation de la validation de jquery 1.17.0 avec Bootstrap 4.0.0 beta

Question

Je travaille sur un projet et j'ai remarqué que bootstrap 4.0.0 beta n'utilise plus de glyphicons, alors comment pourrais-je obtenir le même effet que le 2ème exemple "En utilisant les icônes de commentaires "montré dans le lien ici JQuery-validation and Bootstrap en utilisant font-awesome 4.7.0? J'ai inclus la sortie de la validation ci-dessous pour plus de clarté:

Actuellement ce que j'ai:

HTML

<div class="form-group"> 
    <label class="col-sm-4 control-label df-label" for="first_name">*&nbsp;First&nbsp;name:</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" /> 
    </div> 
</div> 

<div class="form-group"> 
    <label class="col-sm-5 control-label df-label" for="last_name">*&nbsp;Last&nbsp;name:</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" /> 
    </div> 
</div> 

.... 

<div class="form-group"> 
    <div class="col-sm-12"> 
     <button type="submit" class="btn btn-outline-success my-2 my-sm-0" id="send" name="send" value="Send">Send</button> 
    </div> 
</div> 

CSS

.has-danger .control-label, 
.has-danger .help-block, 
.has-danger .form-control-feedback { 
    color: #d9534f; 
} 

jQuery

$("#contact-form").validate({ 
    rules: { 
     first_name: "required" 
     ,last_name: "required" 
     ,email: { 
      required: true 
      ,email: true 
     } 
     ,message: { 
      required: true 
      ,minlength: 10 
     } 
    } 
    ,messages: { 
     first_name: "Please enter your First name" 
     ,last_name: "Please enter your Last name" 
     ,email: "Please enter a valid Email address" 
     ,message: { 
      required: "Please enter a Message" 
      ,minlength: "Your message must consist of at least 10 characters" 
     } 
    } 
    ,meta: "validate" 
    ,errorElement: "em", 

    errorPlacement: function (error, element) { 
     // Add the `help-block` class to the error element 
     error.addClass("help-block"); 

     // Add `has-feedback` class to the parent div.form-group 
     // in order to add icons to inputs 
     element.parents(".col-sm-5").addClass("has-feedback"); 
     element.parents(".col-sm-8").addClass("has-feedback"); 

     if (element.prop("type") === "checkbox") { 
      error.insertAfter(element.parent("label")); 
     } else { 
      error.insertAfter(element); 
     } 

     // Add the span element, if doesn't exists, and apply the icon classes to it. 
     if (!element.next("span")[ 0 ]) { 
      $("<span class='fa fa-times form-control-feedback'></span>").insertAfter(element); 
     } 
    }, 
    success: function (label, element) { 
     // Add the span element, if doesn't exists, and apply the icon classes to it. 
     if (!$(element).next("span")[ 0 ]) { 
      $("<span class='fa fa-check form-control-feedback'></span>").insertAfter($(element)); 
     } 
    }, 
    highlight: function (element, errorClass, validClass) { 
     $(element).parents(".col-sm-5").addClass("has-danger").removeClass("has-success"); 
     $(element).parents(".col-sm-8").addClass("has-danger").removeClass("has-success"); 
     $(element).next("span").addClass("fa-times").removeClass("fa-check"); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
     $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-danger"); 
     $(element).parents(".col-sm-8").addClass("has-success").removeClass("has-danger"); 
     $(element).next("span").addClass("fa-check").removeClass("fa-times"); 
    } 
}); 

Et voici ma sortie jusqu'à présent:

Answer 1

Je suppose que votre question est tout d'abord la mise en place de l'icône de retour et seconde la couleur des éléments? Il y avait quelques grands changements entre les versions alpha et bêta de bootstrap (et aussi bootstrap 3), esp. en ce qui concerne la validation de forme.

D'abord, placer les icônes correctement, vous devez ajouter un style qui correspond à ce qui était en bootstrap 3 et non plus en bootstrap 4 beta ... voici ce que j'utilise

.fa.valid-feedback, 
.fa.invalid-feedback { 
    position: absolute; 
    right: 25px; 
    margin-top: -50px; 
    z-index: 2; 
    display: block; 
    pointer-events: none; 
} 

.fa.valid-feedback { 
    margin-top: -28px; 
} 

Le les classes ont changé car la version bêta utilise l'état du contrôle que votre code posté ne reflète pas, donc votre code ci-dessus peut ne pas fonctionner. Quoi qu'il en soit, vous aurez besoin d'ajouter « a été validé » classe à la forme soit dans le succès ou mettre en évidence/callbacks pas surligner

$(element).closest('form').addClass('was-validated'); 

Je recommande également d'utiliser le nouvel élément et des classes pour le texte d'aide de la forme

errorElement: 'small', 
errorClass: 'form-text invalid-feedback', 

Answer 2

Je suppose que vous ne voulez pas acheter Glyphicons, de sorte que vous pourriez faire le passage à Font Awesome. Regardez la source de l'exemple que vous avez fourni et voyez comment "glyphicon-ok" et "glyphicon-remove" sont utilisés. Les icônes "fa-check" et "fa-times" équivalentes ressemblent aux plus proches.

questions connexes:

• Glyphicons no longer supported in Bootstrap 4

• how to use Glyphicons in bootstrap 4 and angular2?