Как создать настраиваемое сообщение, если шаблон ввода HTML5 не прошел?

Ответ 1

Использование: setCustomValidity

Первая функция устанавливает пользовательское сообщение об ошибке:

$(function(){
    $("input[name=Password]")[0].oninvalid = function () {
        this.setCustomValidity("Please enter at least 5 characters.");
    };
});

Вторая функция отключает пользовательское сообщение. Без этой функции пользовательское сообщение об ошибке не отключится, как сообщение по умолчанию:

$(function(){
    $("input[name=Password]")[0].oninput= function () {
        this.setCustomValidity("");
    };
});

PS вы можете использовать oninput для всех типов ввода, которые имеют текстовый ввод.

Для input type="checkbox" вы можете использовать onclick для запуска, когда ошибка должна выключиться:

$(function(){
    $("input[name=CheckBox]")[0].onclick= function () {
        this.setCustomValidity("");
    };
});

Для ввода type="file" вы должны использовать change.

Остальная часть кода внутри функции изменения должна проверить, не является ли ввод файла пустым.

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

Функция для обработки ввода пользовательских сообщений:

$("input[name=File]").change(function () {
    let file = $("input[name=File]")[0].files[0];
    if(this.files.length){
        this.setCustomValidity("");
    }
    else {
        this.setCustomValidity("You forgot to add your file...");
    }
    //this is for people who would like to know how to check file type
    function FileType(filename) {
        return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
    }
    if(FileType(file.name)!="pdf"||FileType(file.name)!="PDF"){
        this.setCustomValidity("Your file type has to be PDF");
    //this is for people who would like to check if file size meets requirements
    else if(file.size/1048576>2){
        // file.size divided by 1048576 makes file size units MB file.size to megabytes
        this.setCustomValidity("File hast to be less than 2MB");
    }
    else{
    this.setCustomValidity("");
    }
});//file input custom message handling function

HTML5 форма обязательный атрибут. Установить пользовательское сообщение проверки?

JSFiddle: http://jsfiddle.net/yT3w3/

Решение не JQuery:

function attachHandler(el, evtname, fn) {
    if (el.addEventListener) {
        el.addEventListener(evtname, fn.bind(el), false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + evtname, fn.bind(el));
    }
}
attachHandler(window, "load", function(){
    var ele = document.querySelector("input[name=Password]");
     attachHandler(ele, "invalid", function () {
        this.setCustomValidity("Please enter at least 5 characters.");
        this.setCustomValidity("");
    });
});

JSFiddle: http://jsfiddle.net/yT3w3/2/

Ответ 2

Вы можете сделать быстрый и грязный способ с помощью этого трюка:

<form>  
 <label for="username">Username:</label><br/>
  <input id="username" type="text" pattern=".{6,}" autofocus required title="Please enter at least 5 characters">        
  <input id="submit" type="submit" value="create">   
</form>

http://jsfiddle.net/44wSU/1/

Ответ 3

Я бы добавил еще один атрибут oninvalid.

oninvalid="setCustomValidity('Please enter at least 5 characters')"

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" oninvalid="setCustomValidity('Please enter at least 5 characters')"/>

Ответ 4

Вам понадобится функция setCustomValidity. Проблема заключается в том, что он гарантирует только пользовательское сообщение для пользователей, у которых включен JavaScript.

<input required pattern=".{6,}" ... oninput="check(this)">
                                    ^^^^^^^^^^^^^^^^^^^^^

function check (input) {
    if (input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0) {
        // Input is fine. Reset error message.
        input.setCustomValidity('');
    } else {
        input.setCustomValidity('Your custom message here.');
    }
}

Ответ 5

Это очень просто без проверки javascript или jQuery. Мы можем достичь этого с помощью HTML5

Предположим, у нас есть поле HTML:

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />

Просто измените HTML как

<input required pattern=".{6,}" class="big medium-margin" title="Please enter at least 5 characters." name="Password" placeholder="Password" size="25" type="password" />

Если вы наблюдаете, просто добавьте title= "Сообщение об ошибке"

Теперь, когда форма будет публиковаться, данные сообщения будут появляться, и нам не понадобится проверка JavaScript или jQuery. Это решение работает для меня.

Ответ 6

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

вход выглядит так:

<input type="text" title="Number with max 3 decimals" pattern="^\d+(\.\d{1,3})?$">