Как получить поля формы с различными шаблонами проверки в зависимости от условия? - PullRequest
Новая
       29

Как получить поля формы с различными шаблонами проверки в зависимости от условия?

0 голосов
/ 28 декабря 2018

Я работаю над формой, в которой пользователь сначала выбирает «США» или «Международный» на переключателе.В зависимости от выбранной страны в поле ввода телефона должен быть указан 10-значный номер США или международный номер телефона с другим шаблоном.

Я использую стандартную проверку HTML с обязательным атрибутом и регулярным выражением.шаблон.На данный момент у меня есть атрибуты местозаполнителя, шаблона и заголовка для номера США. 

<form>

  <div>
    <fieldset>
      <legend>Country</legend>
      <p>
        <input type="radio" name="country" id="usa" value="usa" required />
        <label for="usa">USA</label>
      </p>
      <p>
        <input type="radio" name="country" id="int" value="int" required />
        <label for="int">International</label>
      </p>
    </fieldset>
  </div>

  <div>
    <label for="telephone">Telephone</label>
    <input
      type="tel"
      name="tel"
      id="tel"
      placeholder="123 456 7890"
      required
      pattern="(?:\d{1}\s)?\(?(\d{3})\)?-?\s?(\d{3})-?\s?(\d{4})"
      title="A valid US 10 digit phone number is required."
    />
  </div>

  <button id="submit" type="submit">Submit</button>

</form>

Как я могу реализовать заполнитель, шаблон и заголовок для международного номера?

Могу ли яиметь два div в HTML для каждого и отображать их с помощью JS в зависимости от выбора переключателя.Или я мог бы оставить HTML как есть и вставить HTML или значения атрибутов для международного выбора с помощью JS, если он выбран.Но мне интересно, есть ли лучший способ, который будет работать или, по крайней мере, будет приемлемым, если JS отключен или недоступен.

1 Ответ

0 голосов
/ 28 декабря 2018

Поскольку вы пошли по этому пути, вы можете прикрепить обработчик кликов к вашим переключателям, чтобы он соответствующим образом изменил атрибуты поля ввода 

<form>
  <div>
    <fieldset>
      <legend>Country</legend>
      <p>
        <input type="radio" name="country" id="usa" value="usa" required />
        <label for="usa">USA</label>
      </p>
      <p>
        <input type="radio" name="country" id="int" value="int" required />
        <label for="int">International</label>
      </p>
    </fieldset>
  </div>

  <div>
    <label for="telephone">Telephone</label>
    <input type="tel" name="tel" id="tel" disabled/>
  </div>
  <button id="submit" type="submit" disabled>Submit</button>
  <script>
  const phoneInput = document.querySelector('#tel');
  const submitButton = document.querySelector('#submit');

[...document.querySelectorAll('input[name="country"]')].forEach(radio => {
	radio.addEventListener('click', function(){
  	phoneInput.disabled = false;
    submitButton.disabled = false;
    if(this.value == 'usa') {
    	phoneInput.setAttribute('placeholder', '123 456 7890');
      phoneInput.setAttribute('pattern', 'xyz');
      phoneInput.setAttribute('title', 'A valid US 10 digit phone number is required.');
    }
    else if(this.value == 'int'){
      phoneInput.setAttribute('placeholder', '+1234567890');
      phoneInput.setAttribute('pattern', 'abc');
      phoneInput.setAttribute('title', 'International phone number format is required.');
    }
  });
});
  </script>
</form>
...