Форма с JavaScript условной проверкой - PullRequest
Новая
       8

Форма с JavaScript условной проверкой

0 голосов
/ 08 февраля 2020 

$('.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;
}
<style>fieldset {
  font-family: Helvetica;
  padding: 10px 12px 12px 12px;
  margin-bottom: 6px;
  position: relative;
  vertical-align: top;
}

.radio label:first-of-type {
  margin-left: 0;
}

.field .radio label {
  display: inline-block;
  font-weight: normal;
  vertical-align: top;
}

.radio label {
  position: relative;
  line-height: 20px;
  padding-left: 28px;
}

.field label,
.EditingFormLabel {
  display: block;
  font-size: 14px;
  font-weight: bold;
  padding-left: 0;
  margin-top: 3px;
}

.radio label,
.checkbox label {
  display: inline;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}

element.style {
  display: block;
}

.field {
  margin-top: 10px;
  vertical-align: top;
}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div>
  <fieldset>
    <h4>Personal:</h4>
    <div class="field SocialSecurity">
      <span id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_lb" class="EditingFormLabel">Do you have a Social Security Number?</span>
      <div id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_ncpsocialsecurity" class="EditingFormControlNestedControl editing-form-control-nested-control">

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

    <div class="field SSN" style="display: none;">
      <label id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SSN_lb" class="EditingFormLabel" for="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SSN_txtText">Social Security Number</label>

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

</html>

У меня есть веб-форма с JavaScript. Моя форма имеет 2 переключателя. Если пользователь выбирает первую радио-кнопку, мне нужно дополнительное поле, чтобы показать и быть обязательным. Если пользователь выбирает второй переключатель, то указанное поле должно быть скрыто и не обязательно. Во-вторых, мне нужно указанное поле, когда требуется подтверждение.

У вас есть номер социального страхования? (Это поле называется SocialSecurity) (переключатель 1). Как гражданин США, постоянный или временно работающий, у меня есть номер социального страхования. (переключатель 2) Из-за моего международного студенческого статуса, моего статуса проживания или моего указанного c типа визы у меня нет номера социального страхования.

Если выбран переключатель 1, тогда другое поле вызываемый SSN отображается и должен быть обязательным, но ТОЛЬКО если пользователь выбирает переключатель 1. Мой текущий код правильно выполняет показ / скрытие, но требует SSN, даже когда пользователь выбирает вариант 2. Мне нужно, чтобы он ТОЛЬКО требовался и подтвердите, если пользователь выбирает переключатель 1. 1. 1012 *

Вот мой 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;
}

Вот мой HTML: 

<div class="field SocialSecurity">
<span id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_lb" class="EditingFormLabel">Do you have a Social Security Number?</span> 
<div id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_ncpsocialsecurity" class="EditingFormControlNestedControl editing-form-control-nested-control">

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

<div class="field SSN" style="display: none;">
    <label id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SSN_lb" class="EditingFormLabel" for="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SSN_txtText">Social Security Number</label> 

      <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> 
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...