I have JavaScript form validation which works normally but i need to validate something ells in the form which is i have a radio yes no and if yes is selected then another box pops up but i need it so if they click yes that the input that comes up is required as well. So this is all my code:
$(document).ready(function(){
//$( "#datepicker" ).datepicker();
//global vars
var form = $("#closecall");
var datepicker = $("#datepicker");
var datepicker_info = $("#datepicker_info");
var hr = $("#hr");
var min = $("#min");
var project = $("#project");
var project_info = $("#project_info");
var des_event = $("#event");
var event_info = $("#event_info");
var happened = $("#happened");
var happened_info = $("#happened_info");
var about = $("#about_it");
var about_info = $("#about_info");
var organisation = $("#organisation");
var organisation_info = $("#organisation_info");
var region = $("#region");
var region_info = $("#region_info");
var rules = $(".rules");
var liferules = $("#liferules");
var rules_info = $("#rules_info");
var end_info = $("#end_info");
//On blur
datepicker.blur(validateDatepicker);
project.blur(validateProject);
des_event.blur(validateEvent);
happened.blur(validateHappened);
about.blur(validateAbout);
organisation.blur(validateOrganisation);
region.blur(validateRegion);
liferules.blur(validateLiferules);
//On key press
datepicker.keyup(validateDatepicker);
project.keyup(validateProject);
des_event.keyup(validateEvent);
happened.keyup(validateHappened);
about.keyup(validateAbout);
organisation.keyup(validateOrganisation);
region.keyup(validateRegion);
liferules.keyup(validateLiferules);
//On Submitting
form.submit(function(){
if(validateDatepicker() & validateProject() & validateEvent() & validateHappened() & validateAbout() & validateOrganisation() & validateRegion() & validateLiferules()){
$("#submit").prop("disabled", true);
$("#submit").prop("value", "Sending...");
end_info.removeClass("info_error");
return true;
}else{
return false;
}
});
//validation functions
function validateDatepicker(){
//it's NOT valid
if(datepicker.val().length < 1){
datepicker.addClass("error");
hr.addClass("error");
min.addClass("error");
datepicker_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
datepicker.removeClass("error");
hr.removeClass("error");
min.removeClass("error");
datepicker_info.removeClass("info_error");
end_info.removeClass("info_error");
return true;
}
}
function validateProject(){
//it's NOT valid
if(project.val().length < 1){
project.addClass("error");
project_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
project.removeClass("error");
project_info.removeClass("info_error");
end_info.removeClass("info_error");
return true;
}
}
function validateEvent(){
//it's NOT valid
if(des_event.val().length < 1){
des_event.addClass("error");
event_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
des_event.removeClass("error");
event_info.removeClass("info_error");
return true;
}
}
function validateHappened(){
//it's NOT valid
if(happened.val().length < 1){
happened.addClass("error");
happened_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
happened.removeClass("error");
happened_info.removeClass("info_error");
return true;
}
}
function validateAbout(){
//it's NOT valid
if(about.val().length < 1){
about.addClass("error");
about_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
about.removeClass("error");
about_info.removeClass("info_error");
return true;
}
}
function validateOrganisation(){
//it's NOT valid
if(organisation.val().length < 1){
organisation.addClass("error");
organisation_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
organisation.removeClass("error");
organisation_info.removeClass("info_error");
return true;
}
}
function validateRegion(){
//it's NOT valid
if(region.val().length < 1){
region.addClass("error");
region_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}
//it's valid
else{
region.removeClass("error");
region_info.removeClass("info_error");
return true;
}
}
function validateLiferules(){
if (rules.attr("value") == "Yes" & liferules.val().length < 1) {
liferules.addClass("error");
rules_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}else{
liferules.removeClass("error");
rules_info.removeClass("info_error");
return true;
}
});
}
And this is the function that i need to make the field required when the radio yes is selected:
function validateLiferules(){
if (rules.attr("value") == "Yes" & liferules.val().length < 1) {
liferules.addClass("error");
rules_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}else{
liferules.removeClass("error");
rules_info.removeClass("info_error");
return true;
}
}
But as soon as i put it in it breaks the whole form validation.
HTML for the check box
<li><label for="rules"><i>* </i>Potential Breach of Life Saving Rules? (Not Applicable to Airports):</label></li>
<li>
<input type="radio" name="rules" class="rules" value="Yes" ><span>Yes</span>
<input type="radio" name="rules" class="rules" value="No"checked><span>No</span>
</li><br />
<li class="liferules" style="display: none;"><label for="liferules"><i>* </i>Life Saving Rules (Not Applicable to Airports):<i class="required" id="rules_info">Required</i></label></li>
<li class="liferules" style="display: none;">
<select name="life_rules" id="liferules">
<option value="">Please Select!</option>
<option value="Working with electricity">Working with electricity</option>
<option value="Working with electricity-test before touch">Working with electricity-test before touch</option>
<option value="Always obey the speed limit and wear a seat belt.">Always obey the speed limit and wear a seat belt.</option>
<option value="Never use a hand-held or hands-free phone, or programme any other mobile device, while driving.">Never use a hand-held or hands-free phone, or programme any other mobile device, while driving.</option>
<option value="Working at height-without a harness">Working at height-without a harness</option>
<option value="Equipment fit for intended purpose">Equipment fit for intended purpose</option>
<option value="Under the influence of Drugs or Alcohol">Under the influence of Drugs or Alcohol</option>
<option value="Wasn't trained for the job at hand">Wasn't trained for the job at hand</option>
<option value="Entered exclusion zone(Without permission)">Entered exclusion zone(Without permission)</option>
<option value="Plans and Permits Weren't in place before Job">Plans and Permits Weren't in place before Job</option>
</select>
</li><br />
You should call event.preventDefault()
with the first argument for form submit handler.
form.submit(function(event) {
if(isCorrect() === false) { // dummy function
event.preventDefault() // This cancel form submit
}
});
If i have understood right you have a check box that contains the class "rules".
Then your validation function should have been:
function validateLiferules(){
// use rules.is(":checked") to check if the check box is checked
if (rules.is(":checked") && liferules.val().length < 1) {
liferules.addClass("error");
rules_info.addClass("info_error");
end_info.addClass("info_error");
return false;
}else{
liferules.removeClass("error");
rules_info.removeClass("info_error");
return true;
}
}
In addition, You should be using the logical && operator as opposed to the bitwise & operator isnt it ?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.