how to hide the error message in javascript

Kani R Published at Dev

Kani R

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>

Rino Raj

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.