alex wiggins alex wiggins - 5 months ago 11
jQuery Question

I can't get my form validation to work

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 />

Answer

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 ?

Comments