Comment valider sélectionnez l'option pour un Matérialiser déroulante?

J'ai une base de sélectionner la zone à l'aide de materializecss.

<select id="type" name="type" required="required" class="validate">
    <option value="" disabled="true" selected="selected">Choose your option</option>
    <option value="general">General</option>
    <option value="tech">Tech</option>
    <option value="person">Personnel</option>
    <option value="resource">Resourcing</option>
</select>
<label data-error="Select an option">Type of Question</label>

Je veux à l'utilisateur de sélectionner une option avant de pouvoir soumettre le formulaire.

Comment puis-je obtenir pour afficher la data-error pour l'étiquette si l'utilisateur ne sélectionne pas une option?

OriginalL'auteur Aeseir | 2015-12-13

  1. 9
    $("select[required]").css({display: "block", height: 0, padding: 0, width: 0, position: 'absolute'});
    Ce qui a le mieux fonctionné pour moi.
    Réponse parfaite.
    Cela a fonctionné, Merci.

    OriginalL'auteur Imran Saleem

  2. 6

    J'ai été confrontée au même problème. J'ai peu de recherche, j'ai trouvé une solution facile:

    Étape 1:

    material_select rend votre sélectionnez masqué (display: none). Et Comme mentionné dans ce post, jQuery validateur ignore les champs cachés. Donc, comme mentionné solution de contournement, ajoutez ce qui suit avant de valider la méthode: 

    $.validator.setDefaults({
       ignore: []
});

$("#yourForm").validate({
        errorClass: "invalid form-error",       
        errorElement : 'div',       
        errorPlacement: function(error, element) {
            error.appendTo( element.parent() );
        }
});

    Également noter que form-error est la classe la classe personnalisée dans mon css:

    .form-error{color: #D8000C;}

    Étape 2:

    Faire de votre sélectionnez requis, qui est déjà appliquée dans cette question de l' select tag. Alternativement, vous pouvez ajouter votre sélectionnez marquer comme required: true dans les règles de validate méthode. Mais ce n'est pas nécessaire, si vous avez ajouté required dans votre code html balise select, alors c'est très bien.

    Que c'est. Avec cela, quand un formulaire est soumis ou $("#yourForm").valid() est appelée, elle permettra de valider votre sélection.

    OriginalL'auteur hemu

  3. 1

    Espère que cela serait utile:

    $('form').on('submit',function(e){
    $(".error_note").remove();
    var select = $(this).find('select').filter("[required=required]");
    $.each(select , function(index, elm){
        val = $(this).val();    
        target = $(this).closest('.input-field');
        if (typeof target !== "undefined") {
            input_target = target.find('input.select-dropdown');
            if (typeof input_target !== "undefined") {                  
                if(val == '' || val == false || val == 0 || val == null){

                    input_target.css({'border-color':'#EA454B','box-shadow':'0 1px 0 0 #EA454B'});
                    input_target.after('<span class="error_note" style="color: #EA454B;font-size: 12px;">Please select this field.</span>');

                    $('html,body').animate({ scrollTop: $("body").offset().top},'slow' );
                    e.preventDefault();

                }else{
                    input_target.css({'border-color':'#9e9e9e'});
                }

            }
        }           
    });
});

    OriginalL'auteur Sumit Chawria

  4. 1
    $("select[required]").css({display: "inline", height: 0, padding: 0, width: 0});

    OriginalL'auteur Rhuan

  5. 1

    Se greffer sur une précédente réponse, j'ai trouvé l'ajout de la visibilité de l'attribut caché a aidé à nettoyer les choses

      $("select[required]").css({
    display: "block", 
    position: 'absolute',
    visibility: 'hidden'
  })

    OriginalL'auteur Ashwin

  6. 1

    hemu la réponse m'a aidé avec quelques discussions sur le matérialiser forum. J'ai trouvé cette solution qui s'intègre bien. L'astuce a été de positionner l'erreur d'étiquette correctement et lui donne sa couleur:

    .select-wrapper label.invalid {
    margin-top: 62px;
    margin-left: -11px;
    color: #F44336;
}

    Vous pouvez trouver et ce à plus d'erreur de placement de la ruse dans le dessous de Violon:

    http://jsfiddle.net/b8frk03m/6/

    OriginalL'auteur Dave de Jong