Функция checkValidity не обнаруживает неверный ввод типа "тел" - PullRequest
Новая
       8

Функция checkValidity не обнаруживает неверный ввод типа "тел"

0 голосов
/ 24 января 2019

Я пытаюсь проверить входные данные моей формы с помощью функции checkValidity, как это 

    let inputs = document.getElementsByTagName('input');
    inputs = Object.values(inputs);
    let textarea = document.getElementsByTagName('textarea');
    textarea = Object.values(textarea);
    inputs.push(textarea[0]);
    
    for(let i=0;i<inputs.length;i++){
    	inputs[i].addEventListener('keyup', function(){
    
    for(let i = 0;i<inputs.length;i++){
        inputs[i].addEventListener('change', function(){
          if($(inputs)[i].checkValidity()){
          $(inputs)[i].classList.remove('inputInvalid');
          $(inputs)[i].classList.add('inputValid');
        }else{
          $(inputs)[i].classList.remove('inputValid');
          $(inputs)[i].classList.add('inputInvalid');
        }
        })
      }
    
      });
    }
input.inputValid, textarea.inputValid{
  border-color:green;
}
input.inputInvalid, textarea.inputInvalid{
  border-color:red;
}

div{
  margin:10px 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>Name*</span>
    <input required type="text" size="40" class="text"/>
  </div>
  <div>
  <span>Company Name</span>
    <input type="text" size="40" class="text" />
  </div>
  <div>
    <span>Telephone*</span>
    <input required type="tel"  size="40" class="text" />
  </div>
  <div>
  <span>e-mail*</span>
    <input required type="text" name="param[email]" size="40" class="text" />
  </div>
  <div>
    <span>Text*</span>
    <textarea required cols="45" rows="8" class="text"></textarea>
  </div>

Но это работает только тогда, когда в атрибуте input с required отсутствует значение.Это не работает, когда есть несоответствие типа значения, например, когда я набираю текст в телефон input, для которого type установлен как tel.Как я могу это исправить?

1 Ответ

0 голосов
/ 24 января 2019

Тип ввода tel не подтвержден.По состоянию на mdn: input [tel]

, поскольку форматы телефонных номеров сильно различаются по всему миру.

Укажите атрибут patternдля ввода.Вы можете использовать любой RegExp, который вам нужен. 

<input required type="tel"  pattern="\+?[\d]{5,40}" class="text" />

А потом, как вы написали: 

let inputs = document.getElementsByTagName('input');

Array.from(inputs).forEach(input => {
  input.addEventListener('change', event => {
    if(input.checkValidity()){
      input.classList.remove('inputInvalid');
      input.classList.add('inputValid');
      return;
    }

    input.classList.remove('inputValid');
    input.classList.add('inputInvalid');
  });  
});
...