Поведение пользовательской проверки HTML - PullRequest
Новая
       21

Поведение пользовательской проверки HTML

0 голосов
/ 10 ноября 2019

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

Сначала я подумал, что простое добавление required обнаружит пустой ввод и покажет сообщение проверки, но оно не показывалось, потому что пользовательская проверка быладобавил который работал только на непустой ввод. Итак, не следует ли проводить проверку пустого ввода вместе с (я имею в виду ранее) пользовательской проверкой при добавлении атрибута required? Почему он полностью переопределяется пользовательской проверкой?

Кроме того, в приведенном ниже коде допустим, что я ввожу ввод как "Hello" и нажимаю "Отправить".

Отображается пользовательское сообщение проверки, но как только я нажимаю символ «W» после «Hello», появляется сообщение о проверке по умолчанию («Пожалуйста, введите @ после ...»). Но я установил setCustomValidity на '' oninput, тогда не должно отображаться сообщение по умолчанию, верно?

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

Пожалуйста, помогите мне прояснить мое понимание пользовательской проверки. 

function fn(e) {
    var eq = document.querySelector("#uname");
    var ev = eq.value;
    if (ev === '') {
        eq.setCustomValidity("Email can't be empty");
        return false;
    }
    else if (!ev.match(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/)) {
        eq.setCustomValidity("Email entered is invalid");
        return false;
    }
    eq.setCustomValidity("");
    e.preventDefault();
}
<!DOCTYPE html>
<html>
  <body>

    <form action="/action_page.php">
      Username: <input type="email" name="usrname" id="uname" oninput="setCustomValidity('')" required />
      <input type="submit" onclick="fn(event)">
    </form>

    <p><strong>Note:</strong> The required attribute of the input tag is not 
    supported in Internet Explorer 9 and earlier versions.</p>

  </body>
</html>
...