Проверка шаблона HTML5 не работает при отправке формы через атрибут onsubmit - PullRequest
Новая
       35

Проверка шаблона HTML5 не работает при отправке формы через атрибут onsubmit

0 голосов
/ 07 марта 2019

Я пытаюсь отправить форму через атрибут onsubmit. Но я хочу, чтобы HTML5 проверки работали также. 

function submitForm() {
  if(somecondition){
      //used this to submit form without it I was not able to submit the form
      $("form#form").submit();
      return true;
  }
  else{
      return false;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="search" method="post" id="form" onsubmit="return submitForm()">
  <input type="text" pattern="[A-Za-z]" required>
</form>

Но даже после того, как вы не указали значение, форма отправляется. Я

Ответы [ 3 ]

0 голосов
/ 07 марта 2019

При использовании JQuery для отправки, он не будет смотреть на проверку HTML, он просто обойдет его. Однако есть способ сделать это, как я покажу ниже. Так что я здесь делаю. Во-первых, для простоты, вместо того, чтобы запускать Submit при загрузке страницы, я создал ссылку с помощью функции submitForm (). Я также создал кнопку отправки, которая невидима. Затем в функции submitForm () вы можете найти скрытую кнопку и вызвать событие щелчка, которое вызовет отправку с кнопки и подтвердит ваш HTML.

Таким образом, вы можете использовать JQuery для запуска отправки и кодирования любого другого кода, который вам нужен в JQuery.

РЕДАКТИРОВАТЬ: изменил фрагмент, чтобы по-прежнему использовать функцию JQuery submit () при проверке. 

function submitForm(){
        // do some stuff
        
        if ($('#form')[0].checkValidity()) {
                 $('#form').submit();
            }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="search" method="post" id="form">
    <input type="text" id="warning" required>
    
    <a href="javascript: void(0);" onclick="submitForm()">Login</a>
</form>
0 голосов
/ 07 марта 2019

Следующий код не должен вызывать «submit», если вход не соответствует шаблону 

<form action="search" method="post" id="form">
  <input type="text" pattern="[A-Za-z]" required title="1 letter only">
</form>

var form = $("#form");

form.on("submit", function(e){
e.preventDefault();
   alert('Submitted')
});

рабочая скрипка здесь: https://jsfiddle.net/lightblue/94wj7cnb/1/

Для шаблона:

  • [a-zA-Z] соответствует ОДНОЙ букве от A до Z в нижнем и верхнем регистре.
  • [a-zA-Z]+ соответствует одной или нескольким буквам (одно слово)

В вашем случае он будет соответствовать только 1 букве

0 голосов
/ 07 марта 2019

Атрибут шаблона вашего ввода является регулярным выражением, вы можете извлечь его вручную 

const patternToMatch = $("input[type="text"]).attr("pattern");

А затем создать его с: 

const regexp = new RegExp(patternToMatch);

Чтобы окончательно убедиться, что входные данные перед отправкой 

function submitForm() {
     if ($("input[type="text"]).val().match(regexp)) {
            form.submit();
     } else {
            // display message
     }
}

Это слепое кодирование, дайте мне знать, если оно не работает :)

...