CODEWITHSUNDEEP
html
Andries
Andries

Reputation: 101

HTML5 form validation messages

I want to translate the default HTML5 form validation messages, I just can't find a list of all possible messages. Does a certain list exist?

Upvotes: 1

Views: 421

Answers (2)

Stokely
Stokely

Reputation: 15759

Access HTM5 Form Field Validation Messages

Browser support of various HTML5 form field validation messages in 2022/2023 is poor because of the so-called 'evergreen browser' update model. However, you can always check for the presence of an HTML5 validation message value, plus its HTML5 validity message type (if supported) using the following code:


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

Like I said, browser support of various HTML5 form field validation messages is poor because of the so-called 'evergreen browser' model. This is because many modern browsers are no longer versioned in the same way they were in the past with a W3C recommendation set. Vendors just do whatever they want, updating new features in current browser installations on user's devices, leaving behind a variety of other browsers who may or may not update these new features on the same timeline. This leaves many versions and types of browsers with an uncertain level of support for HTML5, ECMAScript, and CSS going forward.

Upvotes: 1

Hasan Haghniya
Hasan Haghniya

Reputation: 2535

You can use setCustomValidity:

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

Upvotes: 1

Related Questions