HTML5表单验证消息

lvjbypge  于 2023-01-03  发布在  HTML5
关注(0)|答案(2)|浏览(242)

我想翻译默认的HTML5表单验证消息,但找不到所有可能消息的列表。是否存在某个列表?

wsewodh2

wsewodh21#

您可以使用setCustomValidity

<input 
    type="email" id="email" required placeholder="Enter you email"
    oninvalid="this.setCustomValidity('Enter your email here')"
    oninput="this.setCustomValidity('')"  
/>
l5tcr1uw

l5tcr1uw2#

访问HTM 5表单字段验证消息

由于所谓的“万年青浏览器”更新模型,2022/2023中浏览器对各种HTML5表单字段验证消息的支持较差。但是,您始终可以使用以下代码检查是否存在HTML5验证消息值及其HTML5有效性消息类型(如果支持):

// 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);
}

就像我说的,浏览器对各种HTML5表单域验证消息的支持很差,这是因为所谓的“万年青浏览器”模型。这是因为许多现代浏览器不再像过去那样使用W3C推荐集进行版本控制。供应商只是做他们想做的事情,更新用户设备上当前浏览器安装的新功能。留下了各种其他浏览器,他们可能会也可能不会在同一时间线上更新这些新特性。这使得许多版本和类型的浏览器对HTML5,ECMAScript和CSS的支持水平无法确定。

相关问题