Making 'File' Input Element Mandatory (Required)

How to make file upload field mandatory

If you need pure Javascript: Demo Fiddle

function validate(){
    var inp = document.getElementById('upload');
    if(inp.files.length === 0){
        alert("Attachment Required");
        inp.focus();

        return false;
    }
}

jQuery:

function validate(){

    if($('#upload')[0].files.length === 0){
        alert("Attachment Required");
        $('#upload').focus();

        return false;
    }
}

html 5 hidden input type file required validation

The problem is that browser can not focus hidden elements. Simple fix would be to use opacity: 0 or visibility: hidden instead of display: none.

#imageUpload {

  opacity: 0;

}

<form>

  <input id="imageUpload" class="form-control" type="file" name="image" placeholder="Photo" capture required>

  <input type="submit">

</form>

How to make this file input 'not required' in jQuery Validate?

I have a form which contains a file input element. I have not set its required to true. Still, it is telling me to select a file.

That's because you have the required attribute within the HTML...

<input class="form-control" type="file" name="files[]" id="uploaded_files" required="required" multiple>

Remove the required="required" attribute.

---

The jQuery Validate plugin will set a field to required if any one of the following are true...

• You've declared the required rule on the field within the rules object of the .validate() method.

• You've declared the required rule on the field within the .rules() method.

• You have a required class on the field element.

• You have a required attribute on the field element.

• You've created a compound rule that included the required rule using the jQuery.validator.addClassRules() method, and assigned this class to the field element.

Required attribute Not working with File input in Angular Js

It's the ngModelController that does the validation in Angular based on attributes like require. However, currently there is no support for input type="file" with the ng-model service. To get it working you could create a directive like this:

app.directive('validFile',function(){
  return {
    require:'ngModel',
    link:function(scope,el,attrs,ngModel){
      //change event is fired when file is selected
      el.bind('change',function(){
        scope.$apply(function(){
          ngModel.$setViewValue(el.val());
          ngModel.$render();
        });
      });
    }
  }
});

Example markup:

  <div ng-form="myForm">
    <input id="userUpload" ng-model="filename" valid-file name="userUpload" required type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
    <button ng-disabled="myForm.$invalid" type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i> Ok</button>
    <p>
      Input is valid: {{myForm.userUpload.$valid}}
      <br>Selected file: {{filename}}
    </p>
  </div>

Check out my working plnkr example.

Use CSS to automatically add 'required field' asterisk to form inputs

Is that what you had in mind?

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {

  content:" *";

  color: red;

}

<label class="required">Name:</label>

<input type="text">

---

Related Topics