JS Conditional Validation

1

I have a web form with JavaScript. My form has 2 radio buttons. If the user chooses the first radio button, I need an additional field to show and to be required. If the user chooses the second radio button, then the above field needs to be hidden and not be required. Secondly, I need the said field, when required to be validated.

Do you have a Social Security Number? (This field is called SocialSecurity) (radio button 1) As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number. (radio button 2) Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number.

If radio button 1 is chosen, then another field called SSN is shown and must be required, but ONLY if the user chooses radio button 1. My current code is doing the show/hide properly, but is requiring the SSN even when the user picks choice 2. I need it to ONLY be required and validate IF the user chooses radio button 1.

Here is my JS:

$('.field.SocialSecurity input[type=radio]').on("change", function()
{
  if($(this).val() == 'As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number.')
  {
    $('fieldset.SSN').show();
    $('.field.SSN input').focus();
  }
  else
    $('fieldset.SSN').hide();     
});

$('.field.SocialSecurity input[type=radio]').on("change", function()
{
  switch($(this).val())
  {
    case 'As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number.':
        $('.field.SSN_No').hide();
        $('.field.SSN').show();
      break;

    case 'Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number.':
        $('.field.SSN').hide();
        $('.field.SSN_No').show();
       break;
  }     
});

function validateSSN()
{
  if (!validateRequiredTextField('SSN', 'Social Security Number'))
    return false;

  var value = $('.field.SSN input').val();

  if ( !isInteger(value)
    || (value.length != 9) 
    || (value == '000000000')
    || (value == '111111111')
    || (value == '222222222')
    || (value == '333333333')
    || (value == '444444444')
    || (value == '555555555')
    || (value == '666666666')
    || (value == '777777777')
    || (value == '888888888')
    || (value == '999999999')
    || (value == '123456789'))
  {
    $('.field.SSN input').focus();
    alert("Invalid: Social Security Number");
    return false;
  }

  return true;
}

function validateForm()
{
  if (!validateSSN())
    return false;
  return true;
}
1 Like
3

```

Do you have a Social Security Number? 
  <span id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_list" class="radio radio-list-vertical">
	  <input id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_list_0" type="radio" name="p$lt$ctl03$pageplaceholder$p$lt$ctl00$On_lineForm$viewBiz$SocialSecurity$list" value="As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number." />
        <label for="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_list_0">As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number.</label><br />
	  
	  <input id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_list_1" type="radio" name="p$lt$ctl03$pageplaceholder$p$lt$ctl00$On_lineForm$viewBiz$SocialSecurity$list" value="Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number." />
        <label for="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_list_1">Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number.</label></span>
  </div>
Social Security Number 
  <div id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_ncpssn" class="EditingFormControlNestedControl editing-form-control-nested-control">

		<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl00$On_lineForm$viewBiz$SSN$txtText" type="text" maxlength="9" id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SSN_txtText" class="form-control" />
  </div>
```