I'm building a form that has a lot of conditional paths.. for instance..
Q1.a -> triggers the appearance of question 3
Q1.b -> triggers the appearance of question 2
Q1.c -> skips all the way to question 16
All the questions are required if they're visible to the form user. This being the case I can't just put required in the inputs in case it's one that doesn't get shown.
I've been applying my "required" class in this fashion
$('.question2-a').click(function() {
$(".question3").toggle();
$(".question3").addClass("required");
$(".question4").toggle();
$(".question4").addClass("required");
$(".question5").toggle();
$(".question5").addClass("required");
});
$('.question2-b').click(function() {
$(".question5").toggle();
$(".question5").addClass("required");
});
In this way only questions that I know appeared get a class of required.
I now need to do a look-up of all the required inputs that appeared and ensure they were properly selected.
So far I have this...
$('#PWLE').submit(function() {
if ($('.required input:checkbox', this).is(':checked') && $('.required input:radio', this).is(':checked')) {
// everything's fine...
}
else {
alert('Please fill out all required fields');
return false;
}
});
This isn't really doing the trick because as soon as one checkbox and radio are selected the if is satisfied and the form will submit.
Is there a way I can loop through my required class to ensure that if statement logic is running on all of them?
Snippet of HTML Form
<!-- Question #2 -->
<div class="form-group question2">
<p><b><span class="req-notice">*</span>Have you received a newsletter in the past two years?</b></p>
<div class="form-check question2-a">
<input class="form-check-input" type="radio" value="Yes" id="2261_9466_4_42752_1" name="2261_9466_4_42752">
<label class="form-check-label" for="2261_9466_4_42752_1">
Yes
</label>
</div>
<div class="form-check question2-b">
<input class="form-check-input" type="radio" value="No" id="2261_9466_4_42752_2" name="2261_9466_4_42752">
<label class="form-check-label" for="2261_9466_4_42752_2">
No
</label>
</div>
</div>
<!-- End of Question #2 -->
<!-- Question #3 -->
<div class="form-group question3">
<p><b><span class="req-notice">*</span>When did you register for the newsletter? (choose only ONE)</b></p>
<div class="form-check">
<input class="form-check-input" type="radio" value="In the past 6 months" id="2261_9466_5_42753_1" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_1">
In the past 6 months
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="Between 6 to 12 months" id="2261_9466_5_42753_2" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_2">
Between 6 to 12 months
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="Between 1 to 2 years" id="2261_9466_5_42753_3" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_3">
Between 1 to 2 years
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="More than 2 years" id="2261_9466_5_42753_4" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_4">
More than 2 years
</label>
</div>
</div>
<!-- End of Question #3 -->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".q1.required").click(function(){
if(this.value == "yes"){
$("#div3").show();
$("#div3 :input").prop('required',true);
}
else{
$("#div3").hide();
$("#div3 :input").prop('required',false);
}
});
});
</script>
</head>
<body>
<form action="" method="">
<div id="div1">
<label><b>Question 1</b></label>
<input name="q1" class = "q1 required" type="radio" value = "yes" required>
<input name="q1" class = "q1 required" type="radio" value = "no" required>
<br>
</div>
<div id="div2">
<label><b>Question 2</b></label>
<input id="q2" name="q2" class = "required" type="radio" value = "no" required>
<input id="q2" name="q2" class = "required" type="radio" value = "yes" required>
<br>
</div>
<div id = "div3" style="display:none;">
<label><b>Question 3</b></label>
<input id="q3" name="q3" class = "" type="radio" value = "yes">
<input id="q3" name="q3" class = "" type="radio" value = "no">
<br>
</div>
<button>Submit</button>
</form>
</body>
</html>
You can use required attribute instead of class for enabling automatic validation on click of submit/button.
Keep class "required" just for triggering the click event.
Refer the code above :
I have displayed 2 questions,and on click of "yes" of first question I display third question and set the input attribute as required and then if you click "no" then I hide the question and remove the 'required' attribute.
This code is a working example, feel free to run it and check.
Related
I have a multi-step form and currently using parsley for validation. Validation is performed on form elements when the next button is clicked. For some weird reason, validating radio buttons has turned out to be a huge problem.
JS
const firstName = $("#pi_fname").parsley();
firstName.isValid() // returns true or false depending on validation rules
const question1 = $("input[type='radio'][name='question1']").parsley();
question1.isValid() // produces Uncaught TypeError: question1.isValid is not a function
HTML
<div class="col-sm-12">
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="exampleRadios11" value="1"
data-required="true">
<label class="form-check-label" for="exampleRadios11">
Strongly disagree
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="exampleRadios12" value="2">
<label class="form-check-label" for="exampleRadios12">
Disagree
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="exampleRadios13" value="3">
<label class="form-check-label" for="exampleRadios13">
Neutral
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="exampleRadios14" value="4">
<label class="form-check-label" for="exampleRadios14">
Agree
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="exampleRadios15" value="5">
<label class="form-check-label" for="exampleRadios15">
Strongly agree
</label>
</div>
</div>
Parsley's documentation says
When doing $('#target').parsley() or new Parsley('#target'); on a
element (or , ), it will bind
the field and return a ParsleyField instance. Except for input types
radio and checkbox that don't have a name attribute or a
data-parsley-multiple attribute, they won't be bound (ignored) and
will eventually raise a warning in the console.
But the radio buttons have a name attribute. So why is it failing? Please help!!!
$("input[type='radio'][name='question1']") returns a jQuery set with multiple elements. Calling .parsley() on it will return an array of Parsley objects and not a Parsley element like you are expecting.
You should call .first().parsley().isValid(), or .parsley()[0].isValid(). There's nothing special about the first element of course, the result of isValid will be the same for any of the radios.
There are 3 radio button groups for user to select.
Division '#targetOption' will get whenever the user checked radio button label to be displayed. Below my code which is able to get the first checked radio button.
Example if user click on the first radio button group, #targetOption will show A. Then if user click on the second radio button group, #targetOption will show A B.
<div id="options">
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="a">
A
</label>
</div>
<div class="radio">
<label> <input type="radio" value="b">
B
</label>
</div>
<div class="radio">
<label> <input type="radio" value="c">
C
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="d">
D
</label>
</div>
<div class="radio">
<label> <input type="radio" value="e">
E
</label>
</div>
<div class="radio">
<label> <input type="radio" value="f">
F
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="g">
G
</label>
</div>
<div class="radio">
<label> <input type="radio" value="h">
H
</label>
</div>
<div class="radio">
<label> <input type="radio" value="i">
I
</label>
</div>
</div>
</div>
<div id="targetID"></div>
$('#options').click(function() {
$('#targetID').html('');
$("input[type='radio']:checked").each(function() {
var optiontext = $(this).parent().text();
console.log(optiontext);
$('#targetID').html(optiontext);
});
});
$('#targetID').html(optiontext); set #targetID to the current radio value in the loop instead of appending it to #targetID.
Use $('#targetID').html($('#targetID').html() + optiontext); instead.
Or you can create an array to store the checked values and update #targetID later
I have a multi-row form with single choice radio buttons in each row. I'd like the final <button> tag to be disabled until a radio button as been checked from each row.
I currently have a solution from a previous question (jQuery multi-step form: disable 'next' button until input is filled in each section) that removes the disabled attribute from the button when you select any radio button but i'd like to be more specific if possible.
Is this possible? Here's a Codepen of what I'm working on currently: https://codepen.io/abbasarezoo/pen/vdoMGX - as you can see when hit any radio in any row the disabled attribute comes off.
HTML:
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-2" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-4" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-5" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
jQuery:
$('fieldset input').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
You need to specify the same name for the radio button group so that only one radio button is selected per row. Then, you can simply compare the length of the checked radio button with the length of the radio button group like this,
$('fieldset input').click(function () {
var radioLength = $('.radio-group').length;
if ($('input:checked').length == radioLength) {
$('fieldset button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-1" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-2" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-2" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
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.
I have some questions with answers. I want to store the checked off answer in a variable. Each answer is as a radio button. For example:
<h4 class='ques1'>Question one here here</h4>
<div class="checkbox">
<label>
<input type="checkbox"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> answer 2
</label>
</div>
<h4 class='ques2'>Question two here here</h4>
<div class="checkbox">
<label>
<input type="checkbox"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> answer 2
</label>
</div>
Then I have variables set up to store the checked answer….
var ques1Answer, ques2Answer;
I'm not sure if you need to query the label tag or the input tag to get the value. But this is what I've tried:
$('h4.ques1 div.checkbox label input').on('change', function(){
ques1Answer = $(this).val();
});
First of your selector is wrong 'h4.ques1 div.checkbox label input'
the DIV is not a child of h4.ques1 so use:
$('div.checkbox label input')
if you use .val() that implies that actually you have an value attribute otherwise you'd better assign some name attributes:
<input type="checkbox" name="Question-A-1">
<input type="checkbox" name="Question-A-2">
so even if you get the "on" / "off" (default values) you'll always know what's the name entity those values are referring to.
Worth noting that if only one answer is possible-per-question than you might want to use Radio Buttons instead
<input type="radio" name="Question-A" value="1">
<input type="radio" name="Question-A" value="2">
in that case it makes sense to hold inside your vars only one value-per-question.
Than wrap all your questionnary inside a <form> and use .serialize() fo get all the answers:
$("button").click(function(){
alert( $("form#questionnary").serialize() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="questionnary">
<h4 class='ques1'>Question one here</h4>
<div class="checkbox">
<label>
<input type="radio" name="Question-A" value="1"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="Question-A" value="2"> answer 2
</label>
</div>
<h4 class='ques2'>Question two here</h4>
<div class="checkbox">
<label>
<input type="radio" name="Question-B" value="1"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="Question-B" value="2"> answer 2
</label>
</div>
</form>
<button>TEST RESULTS</button>