I'm looking for some help regarding making checkboxes required.
I'm build a form, based on bootstrap 4. I'm validating the form by the JS example in bootstrap documentation, by adding "novalidate" to form, adding "required" to inputs, and adding the following script:
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('forms');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
Everything is going smoothly, but now I got a few checkboxes, and I would like to only validate it if user checks at least one. I was wondering, if I should make a different function to validate this, or build on the current one. Whichever the case, I'd be very grateful if someone could help me out.
This is the code for the checkboxes:
<div class="form-row">
<div class="form-group col-md-4">
<label for="checkboxes">IndÃcios:</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" id="" type="checkbox" value="1">
1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="2">
2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="3">
3
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="4">
4
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="5">
5
</label>
</div>
</div>
<div class="form-group col-md-4">
<label for="checkboxes1"> </label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="checkboxes1" value="6">
6
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="7">
7.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="8">
8
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="9">
9
</label>
</div>
</div>
</div>
Thanks a ton in advance!
Since you mentioned that you use jQuery here is a function you can add to you checkValidity method
function checkCheckboxes = function() {
return ($('.form-check-input:checked').length > 0);
};
this functions checks if there is any input with class .form-check-input and with the :checked state is available in the html. When it is, the checkbox-validation is valid.
Related
I have no idea how to hide / show checkboxes depending on the choice based on the data-attribute (data-profession attribute).
Code: https://codepen.io/caqoga/pen/RwQyRaQ
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<div>
<div>
<h2>Select profession</h2>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
<label class="form-check-label" for="profession1">Security guard</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
<label class="form-check-label" for="profession2">Welder</label>
</div>
</div>
<h2>Expected salary</h2>
<div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1" checked="">
<label class="form-check-label" for="salary1">1000 EUR</label>
</div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
<label class="form-check-label" for="salary2">1500 EUR</label>
</div>
<div class="form-check profession_2">
<input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3">
<label class="form-check-label" for="salary3">3500 EUR</label>
</div>
</div>
</div>
</div>
</div>
$( document ).ready(function() {
$('input[name="profession"]').change(function(){
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
}
})
$('input[name="salary"]').change(function(){
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
}
})
});
And now I would like to compare the data-profession in both inputs, if it is equal to or differs - depending on the .change - displaying or hiding the entire checkbox.
In this case, I would like only EUR 1000 and EUR 1500 for the Security Guard, and only EUR 3500 for the Welder.
Something like below:
$('input[name="profession"]').change(function(){
var idprof=$(this).attr('data-profession');
var idsalarytoprof=$('input[name="salary"]').attr('data-profession');
if (idprof == idsalarytoprof) {$('.proffesion_' + idsalarytoprof).show();}
else {$('.proffesion_' + idsalarytoprof).hide();}
});
$('input[name="profession"]').trigger('change');
Thank you for your help.
2 ways for requirement of you :
Disable input of other profession (unchecked)
Hide input of other profession (unchecked)
Code same as :
$('.example-1 input').change(function(){
let profession = $(this).data('profession')
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
$('.' + profession).find('input').attr('disabled',false)
$('.' + profession).siblings(':not(.' + profession + ')').find('input').attr('disabled',true).prop('checked', false)
}
})
$('.example-2 input').change(function(){
let profession = $(this).data('profession')
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
$('.' + profession).removeClass('hide').find('input').attr('disabled',false)
$('.' + profession).siblings(':not(.' + profession + ')').addClass('hide').find('input').attr('disabled',true).prop('checked', false)
}
})
.example-2 .hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="example-1">
<h2>Select profession</h2>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
<label class="form-check-label" for="profession1">Security guard</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
<label class="form-check-label" for="profession2">Welder</label>
</div>
</div>
<h2>Expected salary</h2>
<div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1">
<label class="form-check-label" for="salary1">1000 EUR</label>
</div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
<label class="form-check-label" for="salary2">1500 EUR</label>
</div>
<div class="form-check profession_2">
<input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3" disabled>
<label class="form-check-label" for="salary3">3500 EUR</label>
</div>
</div>
</div>
<div class="example-2">
<h2>Select profession examle 2</h2>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_11" id="profession11" checked="">
<label class="form-check-label" for="profession1">Security guard</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_21" id="profession21">
<label class="form-check-label" for="profession2">Welder</label>
</div>
</div>
<h2>Expected salary examle 2</h2>
<div>
<div class="form-check profession_11">
<input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_11" id="salary11">
<label class="form-check-label" for="salary1">1000 EUR</label>
</div>
<div class="form-check profession_11">
<input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_11" id="salary21">
<label class="form-check-label" for="salary2">1500 EUR</label>
</div>
<div class="form-check profession_21 hide">
<input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_21" id="salary31">
<label class="form-check-label" for="salary3">3500 EUR</label>
</div>
</div>
</div>
</div>
In a Laravel Project, the Create Blade View contains some checkboxes. I have easily achieved the feature that, If the first checkbox is selected, the other checkbox will be disabled.
Create Blade View
<div class="form-group">
<label for="unit_price">Size</label>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="size[]" value="0" >
<label class="form-check-label" for="inlineCheckbox1">0</label>
</div>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="size[]" value="10" >
<label class="form-check-label" for="inlineCheckbox2">10</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="size[]" value="20">
<label class="form-check-label" for="inlineCheckbox3">20</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" name="size[]" value="30">
<label class="form-check-label" for="inlineCheckbox4">30</label>
</div>
</div>
jquery
$("#inlineCheckbox1").click(function() {
$(":checkbox").not(this).prop("disabled", this.checked);
});
But the problem occurs in the Edit Blade View.
Edit Blade View
<div class="form-group">
<label for="unit_price">Size</label>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="size[]" value="0"
{{in_array("0",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox1">0</label>
</div>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="size[]" value="10"
{{in_array("10",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox2">10</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="size[]" value="20"
{{in_array("20",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox3">20</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" name="size[]" value="30"
{{in_array("30",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox4">30</label>
</div>
</div>
In the edit view, the other checkboxes are not disabled though #inlineCheckbox1 was pre-selected. So, the other checkboxes seem clickable.
I want to achieve: the other checkboxes will always be disabled if #inlineCheckbox1 is checked.
try following js in your edit view
$(function(){
if($('#inlineCheckbox1').is(":checked"))
$(":checkbox").not($('#inlineCheckbox1')).prop("disabled", true);
})
This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed 3 years ago.
I have a form where the user choose if he/she is SINGLE CITIZENSHIP OR DUAL CITIZENSHIP.
If the user chooses SINGLE CITIZENSHIP the hidden div will not show up and if the user chooses DUAL CITIZENSHIP the hidden div will show below.
<div class="form-row">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">Filipino</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">Dual Citizenship</label>
</div>
</div>
<div id="hidden">
<div class="form-row">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">By birth</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">By Naturalize</label>
</div>
</div>
</div>
let valeInpOne = document.getElementById('inlineCheckbox1');
let valeInpTwo = document.getElementById('inlineCheckbox2').value;
let ele = document.getElementById("hidden");
if(valeInpOne == 'option1'){ ele.hidden = true }else if(valeInpTwo == 'option2'){ ele.hidden = false }
Use change() event of jQuery and show-hide div.
$(document).ready(function () {
$('#inlineCheckbox2').change(function () {
if (!this.checked)
$('#hidden').fadeOut('slow');
else
$('#hidden').fadeIn('slow');
});
});
#hidden{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox1"
value="option1"
/>
<label class="form-check-label" for="inlineCheckbox1">Filipino</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox2"
value="option2"
/>
<label class="form-check-label" for="inlineCheckbox2"
>Dual Citizenship</label
>
</div>
</div>
<div id="hidden">
<div class="form-row">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox1"
value="option1"
/>
<label class="form-check-label" for="inlineCheckbox1">By birth</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox2"
value="option2"
/>
<label class="form-check-label" for="inlineCheckbox2"
>By Naturalize</label
>
</div>
</div>
</div>
Refer: https://stackoverflow.com/a/19447642/10971575
I have struggeling with my problem for days now and cant find a solution.
Im trying to validate my Radiobuttons, when i submit the form i want it to validate if the radio buttons is empty and then add a is-invalid class from bootstrap, and if some of the buttons are checked i want it to add Class is-valid. When i submit the form right now it only adds class is-invalid.
HTML
<fieldset class="form-group col-md-6">
<div class="col">
<legend class="col-form-label col-md-6">NewsFrek </legend>
<div class="col-md-5">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
<label class="form-check-label" for="gridRadios1">
Every Week
</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Every month
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">
<label class="form-check-label" for="gridRadios3">
Every year
</label>
</div>
</div>
</div>
</fieldset>
JavaScript
if(checkCheckBoxen.checked == true){
$(checkCheckBoxen).addClass('is-valid')
} else{
$(checkCheckBoxen).removeClass('is-valid')
$(checkCheckBoxen).addClass('is-invalid')
}
I actually don't know if this solves your problem because I am not sure if I understand it.
HTML:
<fieldset>
<div class="col">
<legend class="col-form-label col-md-6">NewsFrek </legend>
<div class="col-md-5">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
<label class="form-check-label" for="gridRadios1">
Every Week
</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Every month
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">
<label class="form-check-label" for="gridRadios3">
Every year
</label>
</div>
</div>
</div>
</fieldset>
<a href='javascript:;' class="btn btn-primary ml-5 mt-2" onClick='test()'>Submit Me</>
Javascript:
test = () => {
$(".form-check-input").each(function(index, element) {
var $this = $(this);
if (this.checked) {
$(element).removeClass('is-invalid')
$(element).addClass('is-valid');
}else{
$(element).addClass('is-invalid')
}
});
}
Here's a codepen link!
function display() {
if(document.getElementById('GFG').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("GFG").value
+ " radio button checked";
}
else if(document.getElementById('HTML').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("HTML").value
+ " radio button checked";
}
else if(document.getElementById('JS').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("JS").value
+ " radio button checked";
}
else {
document.getElementById("disp").innerHTML
= "No one selected";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>
How to check whether a radio button
is selected with JavaScript ?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on the button to check whether<br>
a radio button is sected or not
</h3>
<form>
<input type="radio" name="GFG" id="GFG"
value="GeeksforGeeks">GeeksforGeeks<br>
<input type="radio" name="GFG" id="HTML"
value="HTML">HTML<br>
<input type="radio" name="GFG" id="JS"
value="JavaScript">JavaScript<br><br>
<button type="button" onclick="display()">
Submit
</button>
</form>
<br>
<div id="disp" style=
"color:green; font-size:18px; font-weight:bold;">
</div>
</body>
</html>
form validation before submitting the form, you can modify as you need
I have a modal that I am using for a coding boot camp assignment -
I have 7 days of the week listed as well as weekend/weekday options.
I thought I could use the Jquery .each and CSS :checked to pull the values that I had assigned to each of these inputs but I seem to be doing something wrong as every time I try to console log the array I am pushing to - it returns an empty array.
This is my first post on StackOverflow and I am extremely new to coding, please be gentle :)
Apologies in advance for syntax and formatting. Like I said I am super new and have only been coding for about 1.5 months.
I tried giving all the checkboxes different ID's and pulling the values one by one into an array, I also tried giving them all the same name so I could use the CSS checked feature to pull them all at once using .each and this. Neither seemed to work
//below is the check box portion of the modal//
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Monday">
<label for="Monday">Monday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Tuesday">
<label for="Tuesday">Tuesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Wednesday">
<label for="Wednesday">Wednesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Thursday">
<label for="Thursday">Thursday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Friday">
<label for="Friday">Friday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Saturday">
<label for="Saturday">Saturday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Sunday">
<label for="Sunday">Sunday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekday">
<label for="Weekday">Weekday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekend">
<label for="Weekend">Weekend</label>
</div>
// here is where I try to call the values of which boxes are checked back//
$("#submitButton").on("click", function () {
event.preventDefault();
var daysOfWeek1 = [];
$.each($("input[name='dayOfWeek']:checked"), function(){
daysOfWeek1.push($(this).val());
});
console.log(daysOfWeek1)
});
I would like to get an array back containing the values (set of strings) that I entered for each check box options and be able to store it in a variable and console.log it as well.
Right now I am only getting an empty array
It's even simpler - just use map, then convert it to an array (to remove excess properties) using spread syntax:
$("#submitButton").on("click", function() {
event.preventDefault();
var daysOfWeek1 = [...$("input[name='daysOfWeek']:checked").map((i, el) => $(el).val())];
console.log(daysOfWeek1)
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Monday">
<label for="Monday">Monday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Tuesday">
<label for="Tuesday">Tuesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Wednesday">
<label for="Wednesday">Wednesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Thursday">
<label for="Thursday">Thursday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Friday">
<label for="Friday">Friday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Saturday">
<label for="Saturday">Saturday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Sunday">
<label for="Sunday">Sunday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekday">
<label for="Weekday">Weekday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekend">
<label for="Weekend">Weekend</label>
<button id="submitButton">Submit</button>
</div>
ooops. It totally works - I just used dayOfWeek below and daysOfWeek above...
.>
Sorry to bother you