Хотите, чтобы атрибут шаблона html работал, не нажимая кнопку отправки

Я работаю над проверкой и добавляю атрибут шаблона html и хочу увидеть сообщение об ошибке, не нажимая кнопку «Сохранить/отправить». Когда я щелкаю за пределами поля, это должно быть подтверждено моим условием шаблона.

Вот мой код:

<div class="col-md-2">
<div class="form-group">
<label>Extra Credit Days<span class="text-danger">*</span></label>
<input class="form-control" type="text" id="txt_credit_days" name="" 
pattern="(?=.*\d)(?=.*[WQYDM])(?=.*[WQYDM]).{1,3}"title="Enter in specified 
format">
</div> </div>

Что будет JQuery или JavaScript?


javascript button html jquery submit-button
person Aditya    schedule 14.03.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете проверить размытие регулярного выражения. Сделайте что-нибудь, если дана неверная строка

$("input[pattern]").blur(function(){
  var elem = $(this);
	 
  var pattern = new RegExp(elem.attr("pattern"));
  if (pattern.test(elem.val())) {
     alert('okay');
  } else {
  	 alert('bad');
     //disable form submit
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-md-2">
<div class="form-group">
<label>Extra Credit Days<span class="text-danger">*</span></label>
<input class="form-control" type="text" id="txt_credit_days" name="" 
pattern="(?=.*\d)(?=.*[WQYDM])(?=.*[WQYDM]).{1,3}"title="Enter in specified 
format">
</div> </div>

person Raj Sharma    schedule 14.03.2019

arrow_upward
1
arrow_downward

Вот один из подходов, который работает для меня в Chrome:

  • Создайте скрытую кнопку отправки.
  • Прослушайте событие focusout в поле input.
  • Активируйте click на скрытой кнопке отправки.

Это должно запускать проверку HTML5 всякий раз, когда поле теряет фокус (щелчок за пределами поля или табуляция вне его).

Фрагмент:

let input = document.getElementById("txt_credit_days");
let inputButton = document.getElementById("inputButton");

input.addEventListener("focusout", function() {
  inputButton.click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
  <div class="form-group">
    <label>Extra Credit Days<span class="text-danger">*</span></label>
    <form id="form">
      <input class="form-control" type="text" id="txt_credit_days" name="" pattern="(?=.*\d)(?=.*[WQYDM])(?=.*[WQYDM]).{1,3}" title="Enter in specified 
format">
      <input type="submit" class="hide" id="inputButton" style="visibility:hidden;">
    </form>
  </div>
</div>

Примечание. Если вам не требуется предупреждение о проверке на основе браузера (т. е. вы предпочитаете отображать собственное диалоговое окно предупреждения или какое-либо другое сообщение, уведомляющее пользователя о том, что проверка не удалась), вы можете просто использовать метод checkValidity() для элемента ввода. .

person JoshG    schedule 14.03.2019
comment
но я не хочу нажимать ни одну кнопку. когда я щелкнул по экрану или за пределами этого поля, он будет проверен при этом условии. - person Aditya; 14.03.2019
comment
@Aditya Вам не нужно нажимать ни одну кнопку. Это смоделировано. Нажмите «Выполнить фрагмент кода», введите некоторые данные в поле, затем щелкните вне его, чтобы увидеть, что я имею в виду. - person JoshG; 14.03.2019
comment
Ага!! Спасибо. Работает. - person Aditya; 18.03.2019

arrow_upward
0
arrow_downward

На основе этого ответа . Вы можете вручную инициировать отправку с помощью javascript и preventDefault при изменении события ввода, хотя.

person Pavel Kratochvil    schedule 14.03.2019