How to set the custom validation message for radio buttons.
Tried adding oninvalid = this.setcustomvalidity('hsjsjs').
Able to set the message but on click of radio button also getting validation message
Can anyone tell me how to reset the setcustomvalidity
Have given oninvalid event and required attribute for both radio buttons
please try:
oninput="this.setCustomValidity('')"
Related
Using AngularJS and i have a radio box which retrieves the list from Database on selected.
<input type="radio" id="activeMeetingRadio" class="form-check-input mt-0 p-3" ng-model="my.model" value="Active" ng-change="call to backend">
Once i select this radio my list is fetched and radio seems clicked, now after submit the forms,i sets the form as pristine and reset the checked value of radio to blank like below which makes the radio as unchecked.
my.model='';
but the issue is, even if i click the radio again, no event gets fired until i click another radio and then click back to this radio. Seems like a default bahaviour of AngularJS form controls. Is there any way i can make this radio fire event?
I was able to resolve this by setting the value in controller scope and then reset it using my.model='' will reset the value.
I am trying to call validation event of ngNativeValidate on button click. You can find stackblitz at https://stackblitz.com/edit/angular-v5kuwk?file=src%2Fapp%2Fapp.component.ts
https://angular-v5kuwk.stackblitz.io/
In the stackblitz, "Test" button do not validate min and max value of input text number but submit button does.
How I can resolve this?
How do I force md-select in multiple mode to behave just like
<select multiple required ... >
?
Here is the fiddle, to show what I mean. In this example, my browser doesn't let me submit form without selecting at least 1 option from the select tag.
I want md-select to behave similarly, but I don't know how can I do that - neither putting 'required' attribute nor adding 'ng-require' directive helps.
You can rely on Angular to do the validation for this, rather than the browser. Here's my forked example:
http://codepen.io/anon/pen/rVGLZV
Specifically:
<button type="submit" ng-disabled="myForm.$invalid">submit</button>
To keep the submit button disabled until the form is valid and,
<form novalidate name="myForm">
To name the form and tell the browser not to do its own validation on it.
You could even add some CSS class for ng-invalid to show red around the invalid fields.
EDIT: Make sure you put an ng-model on your <select multiple>, otherwise the required attribute won't work.
If you don't want to disable submit button but instead trigger error when submit button is hit, you can set the $touched property to true to trigger required alert
yourFormName.mdseletName.$touched=true;
I have replaced my radio inputs by some label pictures and set the display of the input to "none;"
Now when I'm trying to validate a form without checking the radio inputs, I can't see the chrome "required message" to display, because the input radio is not displayed, how can I make the message appear (only with required attribute) on the labels instead of the input ?
Thanks
I'm using some radio buttons to influence the behavior states of a jQuery widget.
That widget can be used in a form but, since these radios don't contain any actual data, I don't want them to submit noise to the server, or cause naming conflict to whoever will use the widget in his form.
Here are two potential solution starts, not yet satisfying though :
remove the name attribute : seems to work fine for other inputs, but turns my radios into checkboxes : it kills the link between them so selecting one doesn't unselect the others. Is there an HTML way (i.e. other than Javascript event) to bind them without a name attribute ?
disable the input : As expected, nothing is submitted, but the radios become grey and can't be clicked. Is there any way that they stay clickable yet unsubmittable, like disabled at submit time ?
As far as possible, I'm rather looking for a cross-browser solution.
Try call a function before submit, that disables the radio buttons.
function disableBtn() {
document.getElementById('idbtn1').setAttribute('disabled', 'disabled');
document.getElementById('idbtn2').setAttribute('disabled', 'disabled');
return true;
}
Then, in form:
<form action="file" method="post" onsubmit="return disableBtn()">
Try this:
<form>
<input type="radio" name="group1" value="1" form="">
<input type="radio" name="group1" value="2" form="">
</form>
This still uses the name attribute which is required for radio buttons, and it also leaves the inputs enabled for interaction. No JavaScript code, no during-submit patching of the document in hope that the submit will turn out fine and destroying the document before submit will leave no visible traces.
The form="" attribute indicates that these input elements are not included in their parent form. Actually you're supposed to put the ID of another existing <form> element in this attribute, but then again, by the HTML standard, you're probably not supposed to exclude radio buttons from a form. So this hack is the only solution to the problem. (Doesn't work in Internet Explorer, but what does today.)
I'm intending to use this method for radio button groups that are in a data table which is populated from a <template> element. In this case, there will be a radio group in each table row, so their number is unknown. But since the name attribute is the only way to build radio button groups, they'll need to get counting names assigned. Since the table data is put in a JSON field before submitting anyway, I don't need field names for a form submit. Radio buttons do need names for themselves, but this method will still exclude them from being submitted.