如何在javascript中隐藏错误消息

所做的更改

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

为文件输入控件设置一个更改事件处理程序，并在中设置错误消息的显示属性

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

添加一类隐藏，然后像这样删除它：

jsfiddle

.hide {
  display: none
}