We Keep Coding

Disable button if one radio is checked

I have three radio each one has name started with delivery_option and a submit button with css class continue. I want to test if a radio is checked the button must be enabled, otherwise it should be disabled.
i made the code below
$(document).ready(function() {
$('#checkout-delivery-step input:radio').each(function() {
if ($("input:radio[name*='delivery_option']:checked").length != 0) {
$('.continue').prop('disabled', false);
} else {
$('.continue').prop('disabled', true);
}
});
});
but it does not work, what was the issue?

You are running the code only once. The code has to be run every time when the radio button is clicked or changed. So you need to use the following:
// Make this a function.
function checkProgress() {
if ($("input:radio[name*='delivery_option']:checked").length != 0) {
$('.continue').prop('disabled', false);
} else {
$('.continue').prop('disabled', true);
}
}
$(function () {
// Set the status once the doc loads.
checkProgress();
// Set it again when any of the radio buttons are clicked.
$("input:radio[name*='delivery_option']").on("click change", checkProgress);
});
Snippet
// Make this a function.
function checkProgress() {
if ($("input:radio[name*='delivery_option']:checked").length != 0) {
$('.continue').prop('disabled', false);
} else {
$('.continue').prop('disabled', true);
}
}
$(function () {
// Set the status once the doc loads.
checkProgress();
// Set it again when any of the radio buttons are clicked.
$("input:radio[name*='delivery_option']").on("click change", checkProgress);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Group 1</h3>
Option 1: <input type="radio" name="delivery_option_1" />
Option 2: <input type="radio" name="delivery_option_1" />
Option 3: <input type="radio" name="delivery_option_1" />
<h3>Group 2</h3>
Option 1: <input type="radio" name="delivery_option_2" />
Option 2: <input type="radio" name="delivery_option_2" />
Option 3: <input type="radio" name="delivery_option_2" />
<p>Submit?</p>
<input type="button" value="Submit" class="continue" disabled />

You can try something like this with removeAttr which will remove the attribute from any element which is already set.
Also, for the radio you can do this way, once it is clicked then you can enable the button because it doesn't provide a way to deselect it.
Finally, the name for elements can be the same if it is a group and only the id must be unique. Check here.
So, proper code will be
<label for="delivery_option1">Option1:</label><input type="radio" id="delivery_option1" name="delivery_option" />
<label for="delivery_option2">Option2:</label> <input type="radio" id="delivery_option2" name="delivery_option" />
<label for="delivery_option3">Option3:</label><input type="radio" id="delivery_option3" name="delivery_option" />
$(function(){
$("input:radio[name*='delivery_option']").click(function(){
$(".continue").removeAttr("disabled");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Option1: <input type="radio" name="delivery_option1" />
Option2: <input type="radio" name="delivery_option2" />
Option3: <input type="radio" name="delivery_option3" />
<input type="button" value="Submit" class="continue" disabled />

multiple checkboxes at least 1 required in html 5

I want as HTML error message rather than an alert message, I've found few solutions but none are not working as hoped
$('form').on('click', '.required_group', function() {
$('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="whatever" value="1" required class="required_group" />
<input type="checkbox" name="whatever" value="2" required class="required_group" />
<input type="checkbox" name="whatever" value="3" required class="required_group" />
<input type="checkbox" name="whatever" value="4" required class="required_group" />
<input type="submit" name="submit" />
</form>

$('form').on('click', '.required_group', function() {
var flag=false;
$('.required_group').each(function(e){
if (this.checked) {
flag=true;
}
});
if(!flag){
// Do your code for Error Message
}
});

Here is a method with a custom error message.
It looks at everything with the class required_group and counts every instance where it is checked. If the number is 0 it sets a custom message and triggers it, however, if there is one or more it will reset the message and trigger a submit.
function validateGrp() {
let things = document.querySelectorAll('.required_group')
let checked = 0;
for (let thing of things) {
thing.checked && checked++
}
if (checked) {
things[things.length - 1].setCustomValidity("");
document.getElementById('checkGroup').submit();
} else {
things[things.length - 1].setCustomValidity("You must check at least one checkbox");
things[things.length - 1].reportValidity();
}
}
document.querySelector('[name=submit]').addEventListener('click', () => {
validateGrp()
});
<form id="checkGroup">
<input type="checkbox" name="whatever" value="1" class="required_group" />
<input type="checkbox" name="whatever" value="2" class="required_group" />
<input type="checkbox" name="whatever" value="3" class="required_group" />
<input type="checkbox" name="whatever" value="4" class="required_group" />
<button name="submit">Submit</button>
</form>

If all three radio buttons are false, don't validate

I have three different blocks of code, with radio buttons.
The only thing that changes are id and the name of them.
What I need is: if all radio buttons are checked on the value="false" (the user choose to check all the "no"), the form won't be valid.
I'm currently using jQuery validation and all I got to have is that radio buttons are all required.
I tried with this code, but it's not working.
registerForm.validate({
rules: {
'data': {
required: {
depends: function() {
return $('.yesandno').is(':checked').val() === "false";
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="radio" class="yesandno" id="yes-balance" tabindex='9' name="data" value="true" />
<label for="yes-balance" class="yes">YES</label>
<input type="radio" class="yesandno" id="no-balance" tabindex='9' name="data" value="false" />
<label for="no-balance" class="no">NO</label>
</div>
EDIT:
In the end, I mixed Ele's code-reply with the jQuery validation plugin that it is used on the portal I'm working on.
This is the code:
submitHandler: function(form) {
$('#btn-register').click(() => {
if ($('.yesandno:checked[value="false"]').size() === 3) {
return false;
} else {
form.submit();
}
});
}

You could use filter and check the length:
// this filter will only return radios that are checked and have a value of false
$('.yesandno').filter(function() {
return this.checked && this.value === "false";
}).length === 3;

With a jQuery selector you can accomplish that
$('.yesandno:checked[value="false"]').size() === 3
Look at this code snippet
$('button').click(() => {
if ($('.yesandno:checked[value="false"]').size() === 3) {
console.log('All radionbuttos were checked to NO');
} else {
console.log('Either at least one Radionbutto is YES or a (YES/NO) radiobutton was not still checked!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="radio" class="yesandno" id="yes-balance" tabindex='9' name="data" value="true" />
<label for="yes-balance" class="yes">YES</label>
<input type="radio" class="yesandno" id="no-balance" tabindex='9' name="data" value="false" />
<label for="no-balance" class="no">NO</label>
</div>
<div>
<input type="radio" class="yesandno" id="yes-balance" tabindex='9' name="data2" value="true" />
<label for="yes-balance" class="yes">YES</label>
<input type="radio" class="yesandno" id="no-balance" tabindex='9' name="data2" value="false" />
<label for="no-balance" class="no">NO</label>
</div>
<div>
<input type="radio" class="yesandno" id="yes-balance" tabindex='9' name="data3" value="true" />
<label for="yes-balance" class="yes">YES</label>
<input type="radio" class="yesandno" id="no-balance" tabindex='9' name="data3" value="false" />
<label for="no-balance" class="no">NO</label>
</div>
<br>
<button>Click to see selected value!</button>
See? the condition is true when size === 3.

You can check at least one true value to pass your validation instead of checking all three radio buttons for false to fail validation. This will be helpful to scale your HTML radio options without having to change the JQuery code again and again for the length match for false options selection.
function passValidation(){
$('.yesandno').filter(function() {
return this.checked && this.value === "true";
}).length > 0;
}
Call passValidation() function during validation and if it returns true then there is at least one radio button with Yes option selected. And false from passValidation() means no Yes option is selected.

How to check for a checkbox to be checked?

I have 2 checkboxes. I need one, not both, but at least 1 to be checked. It is not a multiple selection but zero is not accepted. If one is checked, this line will work jQuery('#wiz_menu.nav-tabs > .active').next('li').find('a').trigger('click'); otherwise it should alert. The following makes it alerting all the time.
UPDATE
I am not using the submit button or I would have used the validate plugin. It is a normal button to go next in the wizard <button type="button" class="btnNext">Next step</button>
HTML
<div class="form-group">
<label for="usp-category-8" class="usp-checkbox usp-cat usp-cat-0">
<input type="checkbox" name="usp-category[]" id="usp-category-8" value="8" data-required="true" class="usp-input usp-input-category">
Cultura
</label>
<label for="usp-category-7" class="usp-checkbox usp-cat usp-cat-0">
<input type="checkbox" name="usp-category[]" id="usp-category-7" value="7" data-required="true" class="usp-input usp-input-category">
Scienze
</label>
<input type="hidden" name="usp-category-required" value="1">
</div>
JS
jQuery('.btnNext').on("click", function(){
if(jQuery(".tab-pane").is("#step1")) {
var isChecked = false;
$('input[type=checkbox]').on("change", function () {
isChecked = true;
});
if ( isChecked ) {
jQuery('#wiz_menu.nav-tabs > .active').next('li').find('a').trigger('click');
} else {
alert( 'Please, check at least one checkbox!' );
}
}
});

With jQuery you can use is:
$('#form').on('submit', function(e) {
e.preventDefault();
if ($('input[name="hi"]').is(':checked')) {
console.log('checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="checkbox" name="hi" value="hi">Hallo<br>
<input type="checkbox" name="gb" value="gb">Tschuss<br>
<input type="submit" value="Submit">
</form>
Adapted to your code:
$('.btnNext').click(function(e) {
e.preventDefault();
if ($('#usp-category-7').is(':checked') || $('#usp-category-8').is(':checked')) {
console.log('at least one is checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="usp-category-8" class="usp-checkbox usp-cat usp-cat-0">
<input type="checkbox" name="usp-category[]" id="usp-category-8" value="8" data-required="true" class="usp-input usp-input-category">
Cultura
</label>
<label for="usp-category-7" class="usp-checkbox usp-cat usp-cat-0">
<input type="checkbox" name="usp-category[]" id="usp-category-7" value="7" data-required="true" class="usp-input usp-input-category">
Scienze
</label>
<input type="hidden" name="usp-category-required" value="1">
<button class="btnNext">Next</button>
</div>

Thanks to a comment, I personally resolved it like this, making them radio buttons. But I will accept the other answer as it is correct.
jQuery('.btnNext').on("click", function(){
if(jQuery(".tab-pane").is("#step1")) {
if($('input[type=radio').is(':checked')) {
jQuery('#wiz_menu.nav-tabs > .active').next('li').find('a').trigger('click');
} else {
alert( 'Please, check at least one checkbox!' );
}
}
});

How do I validate a group of checkboxes with YUI3 AlloyUI?

I have a form field with a group of checkboxes and at least one of the many checkboxes must be selected in order to submit the form.
How do I use YUI3 rules to make this happen?
Many thanks,
S
rules: {
fname: {
required: true,
},
email: {
required: true,
email: true
},
tel: {
required: true,
digits: true,
},
dob: {
date: true,
},
},
fieldContainer: '.form__item',
containerErrorClass: 'form__item--error',
HTML:
<fieldset class="form__item form__item--group">
<legend class="form__item__label">
A group of checkboxes
<div class="form__item__label__instructions">
Select one of them.
</div>
</legend>
<input name='errorMessageAnchor' hidden/>
<label class="form__item__label" for="cb1">
<input id="cb1" name="cbName" type="checkbox" class="checkbox" /> One
</label>
<label class="form__item__label" for="cb2">
<input id="cb2" name="cbName" type="checkbox" class="checkbox" /> Two
</label>
<label class="form__item__label" for="cb3">
<input id="cb3" name="cbName" type="checkbox" class="checkbox" /> Three
</label>
<label class="form__item__label" for="cb4">
<input id="cb4" name="cbName" type="checkbox" class="checkbox" /> Four
</label>
</fieldset>

Looking at the source for aui-form-validator, the use of mix indicates how to approach a solution.
For simplicity, I've also included a usage of gallery-checkboxgroups, specifically for CheckboxGroup to have access to allUnchecked function.
HTML
<form id="myForm">
<div class="control-group">
<div>
<h5>Checkbox Group (requries at least 1 selection)</h5>
Checkbox 1<input type='checkbox' class='checkbox' name='cbName'/><br/>
Checkbox 2<input type='checkbox' class='checkbox' name='cbName'/><br/>
Checkbox 3<input type='checkbox' class='checkbox' name='cbName'/>
</div>
</div>
<input class="btn btn-info" type="button" value="Submit"/>
JS
YUI().use('aui-form-validator',
'gallery-checkboxgroups',
function(Y) {
var group = new Y.CheckboxGroup(Y.all('.checkbox'))
var CONFIG = Y.config.FormValidator;
Y.mix(CONFIG.RULES, {atLeastOneCheckbox: function(val, fieldNode, ruleValue) {
return !group.allUnchecked()
}});
var validator = new Y.FormValidator(
{
boundingBox: '#myForm',
rules: {
cbName:{custom:true, atLeastOneCheckbox:true}
}
}
);
}
);
Fiddle
To override the default error message
Y.mix(CONFIG.STRINGS,{atLeastOneCheckbox:"Pick at least 1"});
By default the form validator is going to validate onBlur and since all the checkboxes share the same name, the error message will move around respectively to the last "failed" validation field. To address this issue, place a hidden field <input name='errorMessageAnchor' hidden/> above the group, and associate the error with that field by replacing cbName in the rules
errorMessageAnchor:{custom:true, atLeastOneCheckbox:true}