title: Form validation: How should I validate one dependent user input with another user input?
body: <p>Thanks for your time. I'll start by saying I'm just beginning my journey in JS and could really use some help here. </p>
  
  <p>I'm trying to leverage JS to validate DOBs for new student enrollment forms in our student information system. In the form, we have a DOB, and GL/Grad. Yr among other fields. What I'd like to do is verify the DOB qualifies for the selected GL.</p>
  
  <p>To make this more dynamic, I'd like to validate with the grad year as it wouldn't have to be changed as often, but the Grad. Yr is calculated from Grade Level and not actually a user-input field. </p>
  
  <p>I have little to no knowledge with JS and would appreciate any direction for some viable code, or even a direction to resources to equip myself with adaptable skillsets, for the future.</p>
  
  <p>Right now, all I've done is prompted an alert at the successful loading on the form but it doesn't actually filter and demand healthy data. Also, I've formatted the fields to be highlighted to make the entry a but more guided, beyond the required fields assigned through the configuration panels.</p>
  
  <hr>
  
  <pre><code>document.getElementById('tStateID').style.backgroundColor= "Yellow";
  document.getElementById('sGender').style.backgroundColor= "Yellow";
  document.getElementById('sEthnicity').style.backgroundColor= "Yellow";
  document.getElementById('dBirthdate').style.backgroundColor= "Yellow";
  document.getElementById('tBirthCountry').style.backgroundColor= "Yellow";
  document.getElementById('tGradYear').style.backgroundColor= "Yellow";
  document.getElementById('sState').style.backgroundColor= "Yellow";
  document.getElementById('eRace').style.backgroundColor= "Yellow";
  document.getElementById('eLanguage').style.backgroundColor= "Yellow";
  document.getElementById('eNativeLang').style.backgroundColor= "Yellow";
  document.getElementById('eHomeLang').style.backgroundColor= "Yellow"; function checkCountry() {
  if (document.getElementById("tBirthCountry").value=="")
      return;
  
  if (document.getElementById("tBirthCountry").value.toUpperCase()=="USA") {
      unFlagAsRequired('tInitUSEnrl','lblInitialUSEnrollment');
      unFlagAsRequired('tNbrMnthNonUSAttn','lblNbrofMnthNonUSAttn');
  }
  else {
      flagAsRequired('tInitUSEnrl','lblInitialUSEnrollment');
  document.getElementById('tInitUSEnrl').style.backgroundColor= "Yellow";
      flagAsRequired('tNbrMnthNonUSAttn','lblNbrofMnthNonUSAttn');
  document.getElementById('tNbrMnthNonUSAttn').style.backgroundColor= "Yellow";
  }
  
  function unFlagAsRequired(pField,pLabel) {
  if (!pField || !pLabel) {
      return;
  }
  
  document.getElementById(pLabel).innerHTML = 
  document.getElementById(pLabel).innerHTML.replace('*&amp;nbsp;','');
  
  for (var i = 0; i &lt; gExtraValidationField.length; i++) {
      if (gExtraValidationField[i] != "" &amp;&amp; typeof(gExtraValidationField[i]) != "undefined") {
          if (gExtraValidationField[i]==pField) {
              gExtraValidationField[i]="";
          }
      }
  }
  
  for (var i = 0; i &lt; gExtraValidationLabel.length; i++) {
      if (gExtraValidationLabel[i] != "" &amp;&amp; typeof(gExtraValidationLabel[i]) != "undefined") {
          if (gExtraValidationLabel[i]==pLabel) {
              gExtraValidationLabel[i]="";
  
  checkCountry();
  
  addEvent(document.getElementById('tBirthCountry'),'change',checkCountry);
  
  flagAsRequired('sGender','lblGender');
  
  flagAsRequired('sEthnicity','lblFederalStateEthnicity');
  
  flagAsRequired('sState','lblStateRace');
  
  flagAsRequired('eRace','lblLocalRace');
  </code></pre>