Ответ 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/
