// Get your Form and Field Objects (using var to support old IE)
// ---------------------------------------------------
var form1 = document.getElementById('myformid');
var field1 = document.getElementById('myformfieldid');
var HTML5Message = '';
// Get the HTML5 Form Field Message Box Text
// ---------------------------------------------------
if (field1.willValidate &&
((field1.validity && !field1.validity.valid) || !field1.checkValidity())
){
HTML5Message = f.validationMessage;
}
// Write over Any HTML5 Form Field Validation Message Box
// ---------------------------------------------------
// This code below shows how to customize or write over HTML5 field messages.
// You can modify the code below to write over these popup form field
// validation messages if they are missing, or in this case,
// write over them if they exist. Modify the code as needed.
if (field1.validationMessage && field1.validity.patternMismatch) {
field1.setCustomValidity("Custom Message : Needs Specific Pattern Match");
} else if (field1.validationMessage && field1.validity.tooLong) {
field1.setCustomValidity("Custom Message : Text Longer than Maxlength");
} else if (field1.validationMessage && field1.validity.tooShort) {
field1.setCustomValidity("Custom Message : Text Shorter than Minlength");
} else if (field1.validationMessage && field1.validity.rangeOverflow) {
field1.setCustomValidity("Custom Message : Text Longer than Max Value");
} else if (field1.validationMessage && field1.validity.rangeUnderflow) {
field1.setCustomValidity("Custom Message : Text Shorter than Min Value");
} else if (field1.validationMessage && field1.validity.typeMismatch) {
field1.setCustomValidity("Custom Message : Text not in Required Syntax");
} else if (field1.validationMessage && field1.validity.customError) {
field1.setCustomValidity("Custom Message : An error occurred!");
}
// Trigger THE HTML5 Validation box on any Invalid Form Field
// ---------------------------------------------------
// This code below only works in the current version of Chrome,
// but also oddly in IE10-11 but not Firefox. But going forward,
// this would allow you to trigger the HTML5 form field validation
// on an <input> or any other HTML5 form field with
// a "required=required" attribute.
if (field1.required || field1.required === 'required'){
field1.addEventListener('change',function (e) {
if (!ValidateField(field1)){
field1.focus();
form1.reportValidity();
}
},false);
field1.addEventListener('blur',function (e) {
if (field1.value === ''){
field1.focus();
}
},false);
}
2条答案
按热度按时间wsewodh21#
您可以使用setCustomValidity:
l5tcr1uw2#
访问HTM 5表单字段验证消息
由于所谓的“万年青浏览器”更新模型,2022/2023中浏览器对各种HTML5表单字段验证消息的支持较差。但是,您始终可以使用以下代码检查是否存在HTML5验证消息值及其HTML5有效性消息类型(如果支持):
就像我说的,浏览器对各种HTML5表单域验证消息的支持很差,这是因为所谓的“万年青浏览器”模型。这是因为许多现代浏览器不再像过去那样使用W3C推荐集进行版本控制。供应商只是做他们想做的事情,更新用户设备上当前浏览器安装的新功能。留下了各种其他浏览器,他们可能会也可能不会在同一时间线上更新这些新特性。这使得许多版本和类型的浏览器对HTML5,ECMAScript和CSS的支持水平无法确定。