I have a HTML form which has 3 sections of yes/no questions for the user to complete. There’s an existing script to ensure they only select answers to one of the 3 sections.
I would now like to add an additional validation for when the user selects no for all the answers in any section. If they do select no for the section questions I would like to throw a dialog box with 2 buttons (OK and Cancel) and text “You have selected No for your answers. Do you wish to continue?”
Here’s my form and the current scripts I have:
$(document).ready(function() {
$("#editRecord").on("submit", function(e) {
var buttonClicked = $("input[type=submit][clicked=true]").val();
if (buttonClicked === "Continue") {
if (!validateFinish(e)) {
e.preventDefault();
console.log("Continue");
}
} else if (buttonClicked === "Save Draft") {
if (!validateSaveDraft()) {
e.preventDefault();
console.log("Save Draft");
}
}
});
$("input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
function validateFinish(ev) {
// Add your validation logic for the Finish button here
//alert("Form Validation is starting!");
var sectionsTouched = $('tbody').has(':checked'),
inputs = {},
errorMessage = '';
if (sectionsTouched.length === 0) {
errorMessage = 'Please check something before submitting.';
} else if (sectionsTouched.length > 1) {
errorMessage = 'Please complete A or B or C only';
} else {
sectionsTouched.find('input').each(function(i, e) {
var me = $(e),
name = me.attr('name');
inputs[name] = !!inputs[name] || me.is(':checked');
});
$.each(inputs, function(k, v) {
if (!v) {
errorMessage = 'It appears you have not completed all questions.';
}
return v;
});
}
if (errorMessage !== '') {
$('#error').html(errorMessage);
ev.preventDefault();
return false;
}
return true;
}
function validateSaveDraft() {
// Add your validation logic for the Save Draft button here
//alert("Just saving a Draft!");
return true;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<form action="rateArticleCodes.php" method="post" class="" id="editRecord">
<input type="hidden" name="recid" value="123445">
<div class="rate-buttons left py2">
<input type="submit" name="buttonType" id="saveDraft" value="Save Draft" class="mr1">
<input type="reset" name="buttonType" value="Reset" class="mx1">
<input type="submit" name="buttonType" id="submit" value="Continue" class="ml1">
</div>
<div id="error" style="color: red"></div>
<table>
<thead>
<tr>
<th class="nowrap text-left" colspan="2">Section 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1.</td>
<td class="nowrap form-radio"><label>
<input name="CriteriaA1" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaA1" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>A2.</td>
<td class="nowrap form-radio"><label>
<input name="CriteriaA2" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaA2" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>A3.</td>
<td class="nowrap form-radio"><label>
<input name="CriteriaA3" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaA3" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>A4.</td>
<td class="nowrap form-radio"><label>
<input name="CriteriaA4" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaA4" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>A5.</td>
<td class="nowrap form-radio"><label>
<input name="CriteriaA5" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaA5" type="radio" value="No"><span>No</span></label></td>
</tr>
</tbody>
</table>
<p class="m2"><strong>OR</strong></p>
<table>
<thead>
<tr>
<th class="nowrap text-left" colspan="2">Section 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1. </td>
<td class="nowrap form-radio"><label>
<input name="CriteriaB1" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaB1" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>B2.</td>
<td class="nowrap form-radio"><label>
<input name="CriteriaB2" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaB2" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>B3.</td>
<td class="nowrap form-radio"><label>
<input name="CriteriaB3" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaB3" type="radio" value="No"><span>No</span></label></td>
</tr>
</tbody>
</table>
<p class="m2"><strong>OR</strong></p>
<table>
<thead>
<tr>
<th class="nowrap text-left" colspan="2">Section 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>C1.</td>
<td class="nowrap form-radio"><label>
<input name="CriteriaC1" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaC1" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>C2.</td>
<td class="nowrap form-radio"><label>
<input name="CriteriaC2" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaC2" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>C3. </td>
<td class="nowrap form-radio"><label>
<input name="CriteriaC3" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaC3" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>C4. </td>
<td class="nowrap form-radio"><label>
<input name="CriteriaC4" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaC4" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>C5. </td>
<td class="nowrap form-radio"><label>
<input name="CriteriaC5" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaC5" type="radio" value="No"><span>No</span></label></td>
</tr>
<tr>
<td>C6. </td>
<td class="nowrap form-radio"><label>
<input name="CriteriaC6" type="radio" value="Yes"><span>Yes</span></label><label class="ml3"><input name="CriteriaC6" type="radio" value="No"><span>No</span></label></td>
</tr>
</tbody>
</table>
<div class="rate-buttons left py2">
<input type="reset" name="buttonType" value="Reset" class="mx1">
<input type="submit" name="buttonType" id="submit" value="Continue" class="ml1">
</div>
<div id="error" style="color: red"></div>
<!-- to here -->
</form>I’m not sure how to check for “no” answers when the Continue button if clicked and then show a dialog box if they are?