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

Question

Я пытаюсь создать форму с текстовым полем ввода типа с двумя условиями.
1 ) проверить пустое поле.
2 ) пробел не разрешен .
Я добавил шаблон, все работает нормально, когда пустое поле, оно говорит: Пожалуйста, заполните пустое поле , а когда пользователь вводит пробел в имени пользователя, оно говорит: Пожалуйста, соответствует запрошенному формату , но проблема в том, что я пытаюсь заменить значение по умолчанию . Пожалуйста, сравните запрошенный формат с Пробел не разрешен . Но я нигде не могу найти решение.

Мой код указан ниже:

<form method="post">
<input type="text" name="username" pattern="\S+" required >
</form>

Answer 1

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

    var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
    elements[i].oninvalid = function(e) {

        e.target.setCustomValidity("");
        if (!e.target.validity.valid) {
                if ( e.target.value.match(/[\s\t]+/i) ) {
                e.target.setCustomValidity("White space not allowed");
            } else {
                e.target.setCustomValidity("This field cannot be left blank");
            }

        }
    };
    elements[i].oninput = function(e) {
        e.target.setCustomValidity("");
    };
}