how to hide the error message in javascript

Question

i have one file upload form field,here without select any file means i want to show error message,from this code it will be working fine after that i select anyone file means i want hide the error message ,i don't know how to do this???

 $("#horoscope_form").submit(function(e) { e.preventDefault(); var filename = document.forms["myForm"]["Filename"].value; if (filename == null || filename == "") { $("#fileselect_error").show(); return false; } else { var filename = document.getElementById("myFile").value; alert(filename); $("#fileselect_error").hide(); return false; } }); 

 <form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm"> <div class="form-group"> <label class="control-label col-xs-3">File Upload</label> <div class="col-md-9"> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="input-append"> <div class="uneditable-input"> <span class="fileupload-preview"></span> </div> <span class="btn btn-default btn-file" id="fileinput"> <span class="fileupload-exists">Change</span> <span class="fileupload-new">Select file</span> <input type="file" id="myFile" name="Filename"> </span> </div> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-xs-5"> <span id="fileselect_error"><strong >Error!</strong> Please select your file.</span> </div> </div> <div class="form-group"> <div class="col-xs-offset-3 col-md-12"> <button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button> </div> </div> </form> 

Answer 1

Changes Made

$("input:file").change(function (){
    console.log($(this).val().trim())// You will get the input value.
       if($(this).val().trim().length){
         $("#fileselect_error").hide();
       }
       else{
         $("#fileselect_error").show();
       }
});

Working Example

 $(document).ready(function() { //$("#fileselect_error").hide(); $("input:file").change(function() { console.log($(this).val().trim()) if ($(this).val().trim().length) { $("#fileselect_error").hide(); } else { $("#fileselect_error").show(); } }); $("#horoscope_form").submit(function(e) { e.preventDefault(); var filename = document.forms["myForm"]["Filename"].value; if (filename == null || filename == "") { $("#fileselect_error").show(); return false; } else { var filename = document.getElementById("myFile").value; alert(filename); $("#fileselect_error").hide(); return false; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm"> <div class="form-group"> <label class="control-label col-xs-3">File Upload</label> <div class="col-md-9"> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="input-append"> <div class="uneditable-input"> <span class="fileupload-preview"></span> </div> <span class="btn btn-default btn-file" id="fileinput"> <span class="fileupload-exists">Change</span> <span class="fileupload-new">Select file</span> <input type="file" id="myFile" name="Filename"> </span> </div> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-xs-5"> <span id="fileselect_error"><strong >Error!</strong> Please select your file.</span> </div> </div> <div class="form-group"> <div class="col-xs-offset-3 col-md-12"> <button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button> </div> </div> </form> 

Answer 2

Have a change event handler for the file input control and set the display property of the error message there

 $("#horoscope_form").submit(function(e) { e.preventDefault(); var valid = !!$('#myFile').val(); $("#fileselect_error").toggle(!valid); return valid; }); $('#myFile').change(function() { $("#fileselect_error").toggle(!this.value); }) 

 #fileselect_error { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm"> <div class="form-group"> <label class="control-label col-xs-3">File Upload</label> <div class="col-md-9"> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="input-append"> <div class="uneditable-input"> <span class="fileupload-preview"></span> </div> <span class="btn btn-default btn-file" id="fileinput"> <span class="fileupload-exists">Change</span> <span class="fileupload-new">Select file</span> <input type="file" id="myFile" name="Filename"> </span> </div> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-xs-5"> <span id="fileselect_error"><strong >Error!</strong> Please select your file.</span> </div> </div> <div class="form-group"> <div class="col-xs-offset-3 col-md-12"> <button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button> </div> </div> </form> 

Answer 3

Add a class of hide, and the remove it like this:

jsfiddle

.hide {
  display: none
}