Member Avatar for McLaren

Hello,

I treid this attribute on form, but I see one problem - but I shows message in english, but my site is in another languege. So its not nice to have english messages in lithuanian site. Isn't it posible to somehow translate? I tried quick google search on this topic, but did not find anything usefull.

  • 4 Contributors
  • 6 Replies
  • 108 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

As noticed, the text shown when required fails comes from the browser, not the page. is correct that those messages are user‑agent text and are localized by the browser itself, and is also right that required simply marks a field as mandatory. The built‑in validation messages are user‑agent dependent (MDN: Constraint validation).

Implications and a practical approach: the browser’s native messages cannot be changed by HTML alone (setting lang on the page does not force the browser UI to switch). For consistent, site‑language messages, keep required as a progressive enhancement, but supply your own localized messages client‑side and always validate on the server. Browser support for constraint validation is now widespread — verify current levels for very old clients (caniuse: constraint-validation).

Client-side pattern (safe, commonly used): output localized strings from your server into data- attributes or a small JS i18n map, then on invalid call setCustomValidity() and clear it on input. Example:

// sample: inputs can have data-msg-required set server-side, fallback to a client map
document.querySelectorAll('[required]').forEach(function (el) {
  el.addEventListener('invalid', function () {
    var msg = el.dataset.msgRequired || (window.i18n && window.i18n.required) || 'This field is required';
    el.setCustomValidity(msg);
  });
  el.addEventListener('input', function () {
    el.setCustomValidity('');
  });
});

Additional tips: if you fully control validation UI, use novalidate on the form and run your checks, but keep server validation as the source of truth. When replacing native messages, maintain accessibility (set aria-invalid, use aria-describedby or an aria-live region so screen readers announce the message).

Recommended Answers

All 6 Replies

Member Avatar for pritaeas

Can you show what you are using?

Member Avatar for McLaren

just a required attribute:

Member Avatar for almostbob

The error message is browser specific, not website specific.
The installed language of the browser, and whether the translation is available, determines the content of the error message.
NOT a good idea to depend upon anything that requires the user to have or do anything properly.
serverside validation, and controlled error messages is better.
Especially as 70%+ of users still do not have a browser that supports any part of html5

Edited by almostbob
Member Avatar for McLaren

then not much of use of this attribute if you can't specify the language. It might be good for site admins, who understand english anyway update their browsers. Hm, and wanted too make me look that I am using new technologies :D

Member Avatar for rotten69

The required attribute is used to indicate that particular field is required and needs to be filled in. Think of it as an input validator.It has got nothing to do with language translation at all.

I hope this helps.

Member Avatar for almostbob

reread the OP, this thread has everything to do with browser translations

Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.