Develop Reference

How to reset inbuilt HTML input validity

In Firefox, at least, native HTML5 input element validity, e.g. a required text field, shows up as a red border, but only after interaction.
e.g. in the example below, I initially see two input boxes. If I type something in one of them, delete it and press Tab, the first one now glows red to show me it's invalid (because it's required).
Using Javascript, how can I reset the form to the pristine initial state, where the red border is not showing?
<form action='#'>
<div>
<input required name="a" type="text" />
<input required name="b" />
</div>
</form>

The only reliable way I've found is to reset the form, either via a <button type="reset"> or through form.reset().
Note, however, that this will wipe the values of any and all fields in the form, so if you need these to remain you'll need to repopulate their values after the reset is done.
Setting <form novalidate> will work, however subsequently removing the novalidate attribute will make the field(s) show errors again.

angularjs checkbox onchange not working in form .$pristine

I have a form in angular and having some input boxes, checkbox and a submit button.Initially Submit button is Disabled.
If I change any element from that form then the submit button become enable.
I am making use of angularjs feature .$pristine and $invalid for that. It is working fine for input boxes but not working for checkbox change.
Am I doing anything wrong? kindly guide me.
See the fiddle :FIDDLE

You need to add an ng-model for checkbox
<input type="checkbox" ng-model="val" required />
Working Demo:http://jsfiddle.net/7qAqe/12/
"An input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance."
- Forms Documentation

You did not bind the checkbox input to any model.
Refer to this demo
<input type="checkbox" required ng-model='rel.checked' />

ng-required does not work with number input with min condition

I have a checkbox, based on value of its ng-model, I'm toggling visibility of a div using ng-show.
This div contains an <input> of type="number". I have a validation on it of min="10000".
I dont want the form to get submitted if the number input is less than 10000.
However, I want this only to happen when the checkbox is checked.
So, I'm using ng-required to check the value of checkbox.
<input type="checkbox" ng-model="isOn"/>
<div ng-show="isOn">
<input type="number" min="10000" ng-model="counter" ng-required="isOn"/>
</div>
If someone proceeds without touching the checkbox and the input field, the form get submitted.
However, if I click the checkbox, enter a number<10000, and the uncheck it again, the form doesn't get submitted.
On the console I get error that it cannot focus on the the input control.
The ng-required fails to work on the min condition. It is being checked regardless of ng-required.
Is there any way I can get this working?
PS: I dont want to use the solution with text input + length limit + restricted char codes on key press so that only numbers could be typed.

you need to reset the model of the number input field to its initial state as well when user unchecks the checkbox.

I used ng-if instead of ng-show and it worked.
I had tried it before I posted the question, but it didnt work. Later I realized I had done the change on a different html file.

I hope this should work
<form name="MyForm" novalidate >
<input type="checkbox" ng-model="MyForm.isOn" required/>
<div ng-show="MyForm.isOn.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">Please select the checkbox</span>
</div>
<div ng-show="MyForm.isOn">
<input type="text" ng-model="MyForm.counter" required min="1000" />
<div ng-show="MyForm.counter.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">You can't leave this empty</span>
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.min">Value should be atleast 1000</span>
</div>
</div>
</form>

How can i create HTML5 like required alert for radio button?

For the input type text, if i add required attribute, my form won't submit and browser will focus on required field and alert will say please fill this field.
For the input type radio, if i add required attibute, my form won't submit but also it does not provide me any alert or focus on the radio which is unchecked.
If this is not an in-built functionality for HTML5, can i in some way create it and make it look like the same as it looks for text inputs so that style integrity is also preserved?

This code works well, if you not select radio, form will not submit. If you select one and enter text in textbox, form will submit.
<form>
<input type="radio" name="one" value="1" required>
<input type="radio" name="one" value="2" required>
<input type="radio" name="one" value="3" required>
<input type="text" name="two" required>
<button>Submit</button>
<form>
Checked on latest version of Google Chrome. May be you found a bug in your browser, try to update it.

Beside required radio button alerts work "perfectly fine" in Chrome...
jsBin demo
it makes no sense at all to have an alert for a radio button, that's silly.
If you have a radio button:
there's absolutely no need to have only one radio button. → Use checkboxes.
there's absolutely no reason to have all radio buttons unchecked initially.
one must be checked by default - and it's your job to do so
logically there's no need to popup alerts like "This radio button is required" - therefore neither to set a required attribute to a radio button.
if you still don't understand why... well simple because radios are used as UI switch states. Only one can and must be checked. If you make them all initially unchecked - and a client unintentionally hits a radio - he's dead in the devil's loop, because once you enter the circle there's no way out. Therefore makes no sense to have all blanks in the first place. You cannot undo... (well, unless you have another silly checkbox or something that says "uncheck all radio buttons!" nonsense).

required field for checkboxes

I have added list of checkboxes in following way. And I have added required property also. Because user should select at least one checkbox.
<div ng-repeat="student in vm.students">
<label class="checkbox-inline">
<input type="checkbox" value="{{studentName}}" ng-model="student.selected" name="students" required>
{{sim.name}}
</label>
</div>
<div data-ng-messages="userform2.simulations.$error" data-ng-if="vm.interacted(userform2.simulations)" class="error-messages">
<div data-ng-message="required">You should select atleast one sim.</div>
</div>
But this one doesn't work. It works for last checkbox only. If check and uncheck the last one the error message is appear, It doesn't look whether other checkboxes are selected or not. Any possible way will be highly appreciable.

In angular you should use ng-required=true to set 'required' on the input
The docs:
https://docs.angularjs.org/api/ng/directive/input

Follow this link
CheckBox List
you will get the answer ithink you missed checklist -value or you need validation on it for select one check box.
for validation take full list and check every property if any no value is checked then generate a message for it.
I hope it will be help to you