I am currently developing an application using angularjs and bootstrap. My goal is to create a simple form validation where all fields in the form must have values when the user clicks on the submit button.
For a demo, you can visit: https://plnkr.co/edit/aHtODbTTFZfpIRO3BWhf?p=preview In the provided demonstration, if a user tries to submit the form without selecting a checkbox, an error message stating 'Please Select the Color..' will be displayed. Even after selecting the checkbox and clicking on submit, the error message persists. Any insights on how to address this issue?
Here is a snippet of the HTML code:
<form name="myForm" ng-controller="ExampleController">
<div>Select Color : </div>
<label name="color" ng-repeat="color in colorNames" class="checkbox-inline">
<input ng-required="selectedColor.length === 0" oninvalid="this.setCustomValidity('Please select the color..')" type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)"> <!--<input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)"> {{color}}-->
{{color}} <br> </label>
<div class="">
<div style="color: black;">Username : </div>
<input type="text" name="user" value="" required>
<div ng-show="myForm.$submitted || myForm.user.$touched">
<p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
</div>
</div>
<button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)">Submit</button>
</form>