Validation

[Colette]

I have a form with some drop down boxes with Yes/No answers. I'd like subsequent fields to be mandatory, depending on what the answer to the box above is. For example. If I want to know if you have kids in question 1, and if you answer Yes, then you will have question2 become mandatory, asking for ages.

Here is the js file I am using to validate the mandatory fields. Can someone help? I've been at this and I'm stumped.

 

// form validation function //

function validate(form) {

    var agency = form.agency.value;

var name = form.name.value;

 var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;

var title = form.title.value;

 var from = form.from.value;

  var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

   var phone = form.phone.value;

   var phoneRegex = /^\d\d\d-\d\d\d-\d\d\d\d$/;

  	 var q1 = form.q1.value;

	 var q5 = form.q5.value;

    var numberRegex = /^([1-5])$/;
var contactTitle = form.contactTitle.value;

 var contactPhone = form.contactPhone.value;

 var contactEmail = form.contactEmail.value;  
var q2 = form.q2.value;
var q3 = form.q3.value;
var q4 = form.q4.value;
var q6 = form.q6.value;
var q7 = form.q7.value;
var q8 = form.q8.value;	
var q9 = form.q9.value;
var q10 = form.q10.value;
var q11 = form.q11.value;
var q13 = form.q13.value;
var q14 = form.q14.value;
var q15 = form.q15.value;

  	  if(agency == "") {

    inlineMsg('agency','You must choose an agency',2);

    return false;

  }



       if(name == "") {

    inlineMsg('name','You must enter your name.',2);

    return false;

  }

  if(!name.match(nameRegex)) {

    inlineMsg('name','You have entered an invalid name.',2);

    return false;

  } 

  

  if(title == "") {

    inlineMsg('title','You must enter your title.',2);

    return false;

  }

   if(from == "") {

    inlineMsg('email','You must enter an email address.',2);

    return false;

  }

    if(!from.match(emailRegex)) {

    inlineMsg('from','You have entered an invalid email.',2);

    return false;

  }

  if(phone == "") {

    inlineMsg('phone','You must enter a valid phone.',2);

    return false;

  }

  

   if(!phone.match(phoneRegex)) {

    inlineMsg('phone','You must enter a valid phone.',2);

    return false;

  }

   if(q1 == "") {

    inlineMsg('q1','You must enter a contact name.',2);

    return false;

  }

   if(!q1.match(nameRegex)) {

    inlineMsg('q1','You have entered an invalid name.',2);

    return false;

  } 

  

   if(contactTitle == "") {

    inlineMsg('contactTitle','You must enter a title for the contact.',2);

    return false;

  }

   if(contactEmail == "") {

    inlineMsg('contactEmail','You must enter an email address.',2);

    return false;

  }

    if(!contactEmail.match(emailRegex)) {

    inlineMsg('contactEmail','You have entered an invalid email.',2);

    return false;

  }

  if(contactPhone == "") {

    inlineMsg('contactPhone','You must enter a valid phone.',2);

    return false;

  }

  

   if(!contactPhone.match(phoneRegex)) {

    inlineMsg('contactPhone','You must enter a valid phone.',2);

    return false;

  }

  


  
if(q2 == "Select One") {

    inlineMsg('q2','You must select Yes or No.',2);

    return false;

  }
if(q3 == "Select One") {

    inlineMsg('q3','You must select Yes or No.',2);

    return false;

  }
  if(q4 == "Select One") {

    inlineMsg('q4','You must select Yes or No.',2);

    return false;

  }
   if(q5 == "") {

    inlineMsg('q5','You must enter a score.',2);

    return false;

  }
     if(!q5.match(numberRegex)) {

    inlineMsg('q5','You must enter a number 1 through 5.',2);

    return false;

  }

  if(q6 == "Select One") {

    inlineMsg('q6','You must select Yes or No.',2);

    return false;

  }
  if(q7 == "Select One") {

    inlineMsg('q7','You must select Yes or No.',2);

    return false;

  }

  if(q8 == "Select One") {

    inlineMsg('q8','You must select Yes or No.',2);

    return false;

  }
    if(q9 == "Select One") {

    inlineMsg('q9','You must select Yes or No.',2);

    return false;

  }

  if(q10 == "Select One") {

    inlineMsg('q10','You must select Yes or No.',2);

    return false;

  }
  if(q11 == "Select One") {

    inlineMsg('q11','You must select Yes or No.',2);

    return false;

  }
  if(q13 == "Select One") {

    inlineMsg('q13','You must select Yes or No.',2);

    return false;

  }
  if(q14 == "Select One") {

    inlineMsg('q14','You must select Yes or No.',2);

    return false;

  }


  if(q15 == "Select One") {

    inlineMsg('q15','You must select Yes or No.',2);

    return false;

  }
  return true;

}



// START OF MESSAGE SCRIPT //



var MSGTIMER = 20;

var MSGSPEED = 5;

var MSGOFFSET = 3;

var MSGHIDE = 3;



// build out the divs, set attributes and call the fade function //

function inlineMsg(target,string,autohide) {

  var msg;

  var msgcontent;

  if(!document.getElementById('msg')) {

    msg = document.createElement('div');

    msg.id = 'msg';

    msgcontent = document.createElement('div');

    msgcontent.id = 'msgcontent';

    document.body.appendChild(msg);

    msg.appendChild(msgcontent);

    msg.style.filter = 'alpha(opacity=0)';

    msg.style.opacity = 0;

    msg.alpha = 0;

  } else {

    msg = document.getElementById('msg');

    msgcontent = document.getElementById('msgcontent');

  }

  msgcontent.innerHTML = string;

  msg.style.display = 'block';

  var msgheight = msg.offsetHeight;

  var targetdiv = document.getElementById(target);

  targetdiv.focus();

  var targetheight = targetdiv.offsetHeight;

  var targetwidth = targetdiv.offsetWidth;

  var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);

  var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;

  msg.style.top = topposition + 'px';

  msg.style.left = leftposition + 'px';

  clearInterval(msg.timer);

  msg.timer = setInterval("fadeMsg(1)", MSGTIMER);

  if(!autohide) {

    autohide = MSGHIDE;  

  }

  window.setTimeout("hideMsg()", (autohide * 1000));

}



// hide the form alert //

function hideMsg(msg) {

  var msg = document.getElementById('msg');

  if(!msg.timer) {

    msg.timer = setInterval("fadeMsg(0)", MSGTIMER);

  }

}



// face the message box //

function fadeMsg(flag) {

  if(flag == null) {

    flag = 1;

  }

  var msg = document.getElementById('msg');

  var value;

  if(flag == 1) {

    value = msg.alpha + MSGSPEED;

  } else {

    value = msg.alpha - MSGSPEED;

  }

  msg.alpha = value;

  msg.style.opacity = (value / 100);

  msg.style.filter = 'alpha(opacity=' + value + ')';

  if(value >= 99) {

    clearInterval(msg.timer);

    msg.timer = null;

  } else if(value <= 1) {

    msg.style.display = "none";

    clearInterval(msg.timer);

  }

}



// calculate the position of the element in relation to the left of the browser //

function leftPosition(target) {

  var left = 0;

  if(target.offsetParent) {

    while(1) {

      left += target.offsetLeft;

      if(!target.offsetParent) {

        break;

      }

      target = target.offsetParent;

    }

  } else if(target.x) {

    left += target.x;

  }

  return left;

}



// calculate the position of the element in relation to the top of the browser window //

function topPosition(target) {

  var top = 0;

  if(target.offsetParent) {

    while(1) {

      top += target.offsetTop;

      if(!target.offsetParent) {

        break;

      }

      target = target.offsetParent;

    }

  } else if(target.y) {

    top += target.y;

  }

  return top;

}



// preload the arrow //

if(document.images) {

  arrow = new Image(7,80); 

  arrow.src = "msg_arrow.gif"; 

}

[MatthewJ]

When posting code to forums, you generally want to use code tags.. and post javascript in javascript forums instead of php forums.

[Colette]

I apologize about that. The page that is pullin the script is a PHP page, so I hoped someone could help.