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

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

＆＃13;

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

＆＃13;

#fileselect_error {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 3

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

jsfiddle

.hide {
  display: none
}

如何在javascript中隐藏错误消息

3 个答案: