如何在javascript中隐藏错误消息

Question

我有一个文件上传表单字段，这里没有选择任何文件意味着我想显示错误消息，从这个代码它将工作正常后我选择任何文件意味着我想隐藏错误消息，我不知道如何做这个？？？

 $("#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

改变了

$("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();
       }
});

工作实例

 $(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

拥有文件输入控件的更改事件处理程序，并在那里设置错误消息的显示属性

 $("#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

添加一类hide，并将其删除如下：

的jsfiddle

.hide {
  display: none
}