Styliser mon input file avec javascript

Fermé
safa778 Messages postés 23 Date d'inscription mardi 15 mai 2018 Statut Membre Dernière intervention 27 mai 2018 - 27 mai 2018 à 19:49
bpnjour tous le monde j'utlise javascript dans mon formulaire pour styliser mon input type et enlever le texte qui vient avec la boutton "choisir un fichier "
<script type="text/javascript">
				    function getfile(){
				        document.getElementById('hiddenfile').click();
				    }
				    function getvalue(){
				        document.getElementById('selectedfile').value=document.getElementById('hiddenfile').value;
				    }
</script>


<div class="form-group">      
         
         <input type="file" id="hiddenfile" style="display:none" name="fichier" onChange="getvalue();"/>
         <input type="text" id="selectedfile" value="Choisissez un fichier" style="display:none"/>
         <input type="button" value="Select a file" onclick="getfile();"/>      
       
         
         </div><br>

tous va bien jusqu'a quand j'utilise le jquery bootstrap validator je veux limiter l'utilisateur d'envoyer seulement
un fichier pdf d'un taille precis quand il fzit pas un message s'apparait qu'il devait respecter le format pdf alors j'utlise le code jquery suivant il marche bien avec le reste de formulaire

<script type="text/javascript">
 
   $(document).ready(function() {
    $('#reg_form').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstname: {
                validators: {
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Please supply your first name'
                    }
                }
            },
             email: {
                validators: {
                     stringLength: {
                        min: 2,
                    },
                    notEmpty: {
                        message: 'Please supply your last name'
                    }
                }
            },
           
            tel: {
                validators: {
                    notEmpty: {
                        message: 'Please supply your phone number'
                    },
                    phone: {
                        country: 'TN',
                        message: 'Please supply a vaild phone number with area code'
                    }
                }
            },
            state: {
                validators: {
                    notEmpty: {
                        message: 'Please select your state'
                    }
                }
            },
             fichier: {
                validators: {
                	notEmpty: {
                        message: 'Please supply your phone number'
                    }
                   
                }
            },
            

                  
             }
        })
		
 	
        .on('success.form.bv', function(e) {
            $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
                $('#reg_form').data('bootstrapValidator').resetForm();

            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                console.log(result);
            }, 'json');
        });
});


ma question est eske parce que j'ai utiliser le javascript dans l'input file c'est pourquoi le message d'erreur de jquery n'apparait pas dans mon code j'ai testé seulement de bien saisir un fichier pas encore pour le format et la taille
A voir également: