'Radio button validation alert not showing - works on everything else
I'm creating a cfmail form for a nonprofit to allow potential vendors to request a spot at the next fundraiser. All fields are required but the radio buttons are not showing the validation alert if not selected.
EDIT: I need the user to check either Yes or No when asked "Will vendor be selling at the event?" If the user checks "Yes", we'll display additional fields (State Tax ID and a textarea asking for more details on their product) that will be REQUIRED. If the user selects "NO" the TaxID and Details will NOT be required but we will be eventually be adding questions as to if they're a 501c3 or not.
I'm javascript illiterate so I had someone else write the JS but she had to move on to other obligations before getting the radio buttons working and I need this working before she'll have time to get back to it. Any help would be greatly appreciated.
Here's the Code:
// phone number
function phoneFormat(input) { //returns (###) ###-####
input = input.replace(/\D/g, '');
var size = input.length;
if (size > 0) {
input = "(" + input
}
if (size > 3) {
input = input.slice(0, 4) + ") " + input.slice(4, 11)
}
if (size > 6) {
input = input.slice(0, 9) + "-" + input.slice(9)
}
return input;
}
$(document).ready(function() {
$("#submitall").click(function() {
if (oked) {
$('#submitall').prop('disabled', true);
$("#submitall").html("Sending...");
$("#submitall").submit();
}
});
$('#salesyes').click(function() {
if ($('#salesyes').is(':checked')) {
$("#statesales").css("display", "block");
$("#StateTaxNumber").prop('required', true);
$("#Details").prop('required', true);
} else {
$("#statesales").css("display", "none");
$("#StateTaxNumber").prop('required', false);
$("#Details").prop('required', false);
}
});
$('#salesno').click(function() {
if ($('#salesno').is(':checked')) {
$("#statesales").css("display", "none");
$("#StateTaxNumber").prop('required', false);
$("#Details").prop('required', false);
} else {
$("#statesales").css("display", "block");
$("#StateTaxNumber").prop('required', true);
$("#Details").prop('required', true);
}
});
});
function countChecked() {
//$("#validateSend").bind('change', function() {
console.log("validateSend clicked");
var cBox = $("#validateSend");
console.log(cBox);
console.log(cBox.prop('checked'));
if (cBox.prop('checked')) {
$('#submitall').prop('disabled', false);
} else {
$('#submitall').prop('disabled', true);
}
}; //end countchecked
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false || $('input[name="Sales"]:checked').length == 0) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- vendor app -->
<div class="container mt-2">
<div class="row justify-content-center mt-5">
<div class="col-sm-12 col-md-10 Sponsors text-center">
<form class="needs-validation" action="/Vendors/index.cfm" id="Vendors" method="post" novalidate>
<input type="hidden" name="Vendors_submit" value="yes">
<!-- company name -->
<div class="form-group row">
<label for="Company" class="form-label text-right">Business/Organization:<sup class="text-danger">*</sup></label>
<input id="Company" name="Company" placeholder="Business/Organization Name" type="text" class="form-control" style="text-transform: capitalize;" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-left">
Please enter the name of the company or individual interested in the Vendor spot.
</div>
</div>
<!-- phone -->
<div class="form-group row">
<label for="Phone" class="form-label text-right">Phone:<sup class="text-danger">*</sup></label>
<input id="phone" name="phone" type="tel" placeholder="(555) 555-5555" class="form-control input-md" onInput="this.value = phoneFormat(this.value)" />
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-left">
Please enter your phone number.
</div>
</div>
<!-- is vendor selling? -->
<div class="form-group row mt-5">
<div class="col-12 text-center">
<strong>Will vendor be selling at the event?<sup class="text-danger">*</sup></strong>
</div>
</div>
<div class="form-group row">
<div class="col-12 text-center my-auto">
<input class="align-left" type="radio" name="Sales" id="salesyes" value="Yes" required> Yes
<input class="align-left ml-5" type="radio" name="Sales" id="salesno" value="No"> No
</div>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-center">
Please select Yes or No.
</div>
</div>
<!-- State Sales Tax certificate -->
<div id="statesales" style="display:none">
<div class="form-group row">
<div class="col-12 text-left font-italic text-danger mb-4">
Some notice stuff here.
</div>
</div>
<div class="form-group row">
<label for="StateTaxNumber" class="form-label text-left">State Sales Tax Number:<sup class="text-danger">*</sup></label>
<input id="StateTaxNumber" name="StateTaxNumber" placeholder="State Sales Tax Number if applicable" type="text" class="form-control">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-left">
Please enter State sales tax number.
</div>
</div>
<!-- details -->
<div class="form-group row">
<label for="Details" class="form-label">Please describe product or service for sale:<sup class="text-danger">*</sup></label>
<textarea id="Details" name="Details" cols="40" rows="5" class="form-control"></textarea>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-left">
Please enter your details.
</div>
</div>
</div>
<!--./end display-none -->
<!-- agree to regulations / restrictions -->
<div class="form-group row justify-content-center">
<div class="col-10 text-center my-auto text-danger">
<input type="checkbox" name="validateSend" id="validateSend" value="1" onclick="countChecked();" /><sup class="text-danger">*</sup>
<i>I have read and understand all the Park's rules and regulations as well as the Requirements and Restrictions listed above.<sup class="text-danger">*</sup>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-left">
Please enter your details.
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<button name="submitall" id="submitall" type="submit" class="btn btn-lg btn-danger mt-4 ml-2 text-center" disabled="disabled">Send Request</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
