I want to create a form with an input file for uploading photos, but I need the submit button to be disabled until the input file has a value. Additionally, there are other validations that will also disable the button.
Here is the structure of my HTML file:
<form name="form" novalidate ng-submit="submitForm();">
<input class="btn btn-primary" type="file" accept="image/*" name="File" id="File" style=" margin-left:5px; width: 100%;">
<div class="form-group">
<label class="text-left control-label">Categories: </label>
<select class="col-xs-5 pull-right" ng-model="cat" name="cat" ng-required="true" required>
<option value="">---Please select---</option>
<option ng-repeat="item in Cat" value="{{item.categories_id}}">{{item.categories_name}}</option>
</select>
</div>
<br/>
<div class="form-group">
<label class="text-left control-label">Types: </label>
<select class="col-xs-5 pull-right" ng-model="type" name="type">
<option value="">---Please select---</option>
<option ng-repeat="item in Types" value="{{item.type_id}}">{{item.type_name}}</option>
</select>
</div>
<br/>
<div class="form-group">
<label class="text-leftcontrol-label">Gender: </label>
<select class="col-xs-5 pull-right" name="category" id="category" ng-model="gender">
<option value="">---Please select---</option>
<option value="0">Female</option>
<option value="1">Male</option>
<option value="2">Both</option>
</select>
</div>
<br/>
<div class="form-group">
<label class="text-left control-label">*Texture: </label>
<select class="col-xs-5 pull-right" ng-model="texture" name="texture" ng-required="true" required>
<option value="">---Please select---</option>
<option ng-repeat="item in Texture" value="{{item.textures_id}}">{{item.textures_name}}</option>
</select>
</div>
<br/>
</div>
<div class="col-xs-5">
<div class="form-group">
<label class="col-md-5 control-label">*Name: </label>
<div class="col-md-7">
<input type="text" class="pull-right input-group inline form-control" ng-model="name" name="name" id="Name" ng-required="true" required>
</div>
</div>
<br/><br/><br/>
</form>
This is how my submit button looks:
<button name="submit" type="submit" id="submitsave" class="btn btn-primary" ng-disabled="form.texture.$invalid || form.cat.$invalid || form.type.$invalid " type="button" type="button" style="margin-right:1%; width:10%; height:10%">Finish</button>