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).
Related
I am writing an Angular component which uses radio button (Need to use default radio buttons due to project constraints).
I need to print the value of the radio button (whether it is checked or unchecked). Like following:
<input type="radio" (change)="onUpdate($event)">
<p>{{isActive}}</p>
In the component something like this:
onUpdate(event) {
this.isActive = event.target.checked;
}
But this doesn't work as the change event is not triggered when the radio button is unchecked. Is there any way to intercept the event when the radio button is unchecked?
Please help. I am stuck. Dummy app link here
Edit: What I am trying to do
I am trying to write a custom radio button so that I can styles it on my own. I cannot write a radio-group component. Hence I need a wrapper component around the default one. Something like Stackblitz-link. I need the unchecked event because I have some custom element which has to be notified about this. Any way to achieve this ?
Use a checkbox, style it like a radio button. Seems to be the easiest solution and of course use ng-model instead of onChange.
You could replace (change) with (click), because every click on the radio button is a change anyway.
<input type="radio" (click)="onUpdate($event)">
<p>{{isActive}}</p>
The above is a solution, but I'd use this:
<input type="radio" [(ngModel)]="isActive">
<p>{{isActive}}</p>
It binds your radio button to your isActive property, so it changes dynamically with clicking.
So using two radio buttons got this working for me, let me know if you can model this for your application.
<input type="radio" name="button" [value]="checked" (change)="checked=!checked">
<input type="radio" name="button" [value]="!checked" (change)="checked=!checked">
<p>{{checked}}</p>
I am setting checked to false by default in my component.
Can you please try to adjust this logic with your code? Checking some new radio will uncheck other and we can keep track of this behavior.
<p>
<input type="radio" name="r1" value="one" [(ngModel)]="isActive">
<input type="radio" name="r2" value="two" [(ngModel)]="isActive">
<input type="radio" name="r3" value="three" [(ngModel)]="isActive">
</p>
<p>{{isActive}}</p>
Stackblitz link
I am using a Contact Form 7 form in Wordpress. I have a group of checkboxes, of which I would like to make sure at least one is checked before the form is submitted. Should be simple enough... With the built in validation, because I am not using the CF7 short code, but html input markup, even if the fields are set to required, the form submits. I cannot use the short code because my input field names contain [] brackets. So, I installed Jquery validation plugin for CF7, which works fine to disallow the form to be submitted if none of the boxes are checked, but if you check, say, the first 3 boxes, only the values of the second and third boxes are sent through the form. I have looked around at several custom validation code snippets which look like they would work and I paste them into the same area as I have other similar snippets doing other things and they don't make a difference because the built in CF7 validation doesn't stop the form from submitting when the required fields of my html input fields aren't checked. Any suggestions? I am not a coder (doing my best though) so please feel free to answer like I am a child lol. Here is my html:
<p>
<label>Which Are You Most Interested In?</label>
</br>
<label for="cb1">
<input id="cb1" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="bf2fd8233f" required> <span>Interest 1</span>
</label>
</br>
<label for="cb2">
<input id="cb2" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="c1b1b74e7c" required> <span>Interest 2</span>
</label>
</br>
<label for="cb3">
<input id="cb3" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="a4c5eb6f36" required> <span>Interest 3</span>
</label>
</br>
<label for="cb4">
<input id="cb4" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="587de639d6" required> <span>Interest 4</span>
</label>
</p>
--
I figured the best way for me to go about this is to just disable the submit button until the group of checkboxes has had at least one value checked (and another set of radio buttons having had one checked) and found this code:
(function($) {
function buttonState(){
$("input").each(function(){
$('#send-info').attr('disabled', 'disabled');
if($(this).val() == "" ) return false;
$('#send-info').attr('disabled', '');
})
}
$(function(){
$('#send-info').attr('disabled', 'disabled');
$('input').change(buttonState);
})
})(jQuery);
... Which works really nicely to disable the submit button, however it seems like since I have hidden fields it does not re-enable the submit button. Also not sure if it cares about required fields only. Wondering how to modify it so that it only cares about required fields and ignores hidden fields. I tried several other snippet solutions and for some reason they were not disabling the submit button. I have the script installed at the bottom of the page via Scripts and Styles Wordpress plugin.
I am generating an HTML form with some radio buttons and checkboxes. the generated code for the radio buttons for instance are like these:
<input id="101_2" type="radio" name="101" value="2" >
<input id="101_3" type="radio" name="101" value="3" checked="true">
Using JavaScript I can make a for cycle to see what radio is checked using the check attribute.
The problem is that if I manually click in another radio option (from the same group as in the example), visually in the HTML I can see that another radio is selected, but the JavaScript is still saying that the input 101_3 is the selected radio option. If I look at the HTML using firebug I can see that the new selected option is indeed not selected (doesn't have the checked attribute)... despite I have selected manually.
Any ideas on this?
Fist and formost when naming your radio buttons or any type of DOM input element never start the name of an input element with a number, always start the name of your input element with a letter.
For your posted code you would name your radios in similar fashion, one01 or x101 or o101,ect...
Do the same thing with your ids' of any DOM element. Never start an id of a DOM element with a number.
--HTML
<input id="x101_2" type="radio" name="x101" value="2">
<input id="x101_3" type="radio" name="x101" value="3" checked="checked">
<br /><br />
<button type="button" onclick="WhatsChecked()">Whats Checked?</button>
--JavaScript
function WhatsChecked() {
var radCk = document.body.querySelectorAll('input[name="x101"]:checked')[0];
alert(radCk.id);
};
--Fiddler
fiddler
I am currently working on a project where we render a dynamic page based on what we are holidng in a SQL table. We have conditional validation for controls where you can say
if x is equal to y then enable controls abc
I have multiple radio buttons in a group, the last control is "Other (please specify)" which when true will enable a textbox to specify so I need to capture when this is set to both true or false. Currently I am doing something like this
<input type="radio" name="test" value="Yes" />
<input type="radio" onchange="onChange()" name="test" value="No" />
<script type="text/javascript">
function onChange() {
alert('Changed')
}
</script>
If I check NO I get an alert. If I then check YES it changes the NO radio button checkstate but doesn't display an alert - any solutions?
The only thing I can suggest is putting an onchange on the whole group and then checking which is selected when they change. Not very elegant but it appears that this is just how the change event works (ie it only responds to a user change, not to a system change of it).
<input type="radio" value="1" id="baby">
I'd like to keep this code like that.
However, can I apply a CSS to it so that the "1" is not displayed to the user?
Edit: For some reason, it is being displayed, I don't know why.
I do have a CSS attached to it though.
The value of "1" is not displayed to the user at all, it's hidden and only has meaning when the form posts. You need to add a <label> tag or just raw text near the radio button to display the value you want the user to see.
For radio buttons, the value attributed is never rendered by the user agent (unless it does something rather weird). Typically, if you need a radio button with a label, you explicitly specify one, ideally using the <label> tag.
The "1" should not display for the user.. it's just a value..
Normally, you'd declare a radio input like so:
<label><input type="radio" value="1" id="baby"> Baby </label>
This will make "Baby" the label for the radio button, this will also make clicking on the Baby text activate the radio button, which is what accessibility rules would require..