Есть ли способ имитировать сообщения "обязательных элементов" перед отправкой формы? - PullRequest
Новая
       13

Есть ли способ имитировать сообщения "обязательных элементов" перед отправкой формы?

0 голосов
/ 26 августа 2018

Я использую обязательный атрибут html5 для элементов ввода в форме. Обычно, когда вы используете их и отправляете форму, вы получаете сообщение о том, что элементы недопустимы.

Я нахожусь в особой ситуации, которая требует от меня проверить состояние полей ввода перед публикацией. (Если все в порядке, то кто-то использует другой код (еще один плагин в Wordpress), запускается с помощью имитации щелчка по другому элементу отправки.)

Вот фрагмент соответствующего jQuery-кода: 

var t = $(this);
found_required = false;
 $("input").each(function() {
 if ( $(this).hasClass('required') ) {
    if ($(this).is(":invalid")) {
        t.removeClass('swishmode');                    
        //Tell user this element is required
        found_required = true;
    }
}
});        

if ( found_required == true ) {
    $('form.give-form').attr('action','Javascript:void();'); //Just an attempt
    $(this).click(); //Just an attempt
    return; //Returns user back to form without doing different things below 
}   

//Code to do different things...

Мой вопрос - есть ли способ показать ошибку по умолчанию, как это было бы при отправке формы с неверными данными? (или вам нужно написать собственную обработку ошибок для этой цели)

Фактический код работает так, как он есть у меня сейчас, но пользователь не получает никаких указаний на то, какие поля являются неправильными. Я знаю, что мог бы просто добавить стиль этих элементов ввода, и я сделаю это, если вышеописанное невозможно.

1 Ответ

0 голосов
/ 26 августа 2018

Существует множество способов проверки формы.

Тем не менее, я думаю, что вам нужно добавить какой-либо прослушиватель событий в событие input, change или blur, которое проверит ввод и отобразит сообщение, если оно недействительно.См. https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_forms_using_JavaScript для очень полезных примеров использования API проверки ограничений .

Они также ссылаются на polyfill .

Вот пример события input: 

var email = document.getElementById('mail');
var error = document.querySelector('.error');

email.addEventListener("input", function (event) {
  // Each time the user types something, we check if the
  // email field is valid.
  if (email.checkValidity()) {
    // In case there is an error message visible, if the field
    // is valid, we remove the error message.
    error.innerHTML = ""; // Reset the content of the message
    error.className = "error"; // Reset the visual state of the message
  } else {
    error.innerHTML = "Please enter a valid email.";
    error.className = "error active";
  }
}, false);
input[type=email]{
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* This is our style for the invalid fields */
input:invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus:invalid {
  outline: none;
}

/* This is the style of our error messages */
.error {
  width  : 100%;
  padding: 0;
 
  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;
 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}
<label for="mail">Enter Email Address:</label>
<input id='mail' type='email' name='mail' required >
<span class="error" aria-live="polite"></span>
...