Translating the HTML5 input field validation message issue

Question

Guys in my laravel application my primary language is French.

In my sign in blade as for the email address field, I've used the following input field,

<input id="email" type="email"
                                   class="form-control @error('email') is-invalid @enderror txt_forms" name="email"
                                   value="{{ old('email') }}" placeholder="{{ __('texts.email') }}"
                                   autocomplete="email" autofocus title="Format d'email invalide">

Now the issue is that whenever I tried to enter an invalid email format (eg:eeeeeee) it shows me html5 error message in English

Please include '@' in the email address

Since my primary language is French I want to display the above message in French

So far I've tried using the title attribute but it's not working either.

The HTML5 error message uses the browser language. In my case it will display in dutch. Normally there is no need to change that. You can do it with JS : (accepted answer) https://stackoverflow.com/questions/10753881/changing-the-language-of-error-message-in-required-field-in-html5-contact-form — Gert B., Aug 11 '21 at 07:41
"_I want to display the above message in English_" It is English already — brombeer, Aug 11 '21 at 07:47

Rajeev Singh · Accepted Answer · 2021-08-11T10:06:14.010

There are multiple ways you can choose accordingly There is few Solution are:

solution 1:

Add your custom message inside this.setCustomValidity() in input field

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('input[required]').on('invalid', function() {
            this.setCustomValidity($(this).data("required-message"));
        });
    });
</script>
<form action="#" name="registration" id="registration">
        <input id="email" type="email" class="form-control @error('email') is-invalid @enderror txt_forms" name="email" value="{{ old('email') }}" placeholder="{{ __('texts.email') }}" autocomplete="email" autofocus oninvalid="this.setCustomValidity('Veuillez fournir une adresse électronique valide.')" >
        <br>
        <input name="submit" type="submit" id="submit" class="submit" value="Submit">
    </form>

solution 2:

add/update your custom message insite $.extend( $.validator.messages)

<!DOCTYPE html>
<html>
    <head>
        <title>Validation</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var validator = $("#registration").validate({
                    errorClass: 'error',
                    validClass: 'valid',
                    rules: {
                        email: { 
                            required: true, 
                            email: true 
                        },
                    },
                    // messages: {
                    //     email: {
                    //     required: "We need your email address to contact you",
                    //     email: "Your email address must be in the format of name@domain.com"
                    //     }
                    // }
                });
                $.extend( $.validator.messages, {
                    required: "Ce champ est obligatoire.",
                    remote: "Veuillez corriger ce champ.",
                    email: "Veuillez fournir une adresse électronique valide.",
                    url: "Veuillez fournir une adresse URL valide.",
                    date: "Veuillez fournir une date valide.",
                    dateISO: "Veuillez fournir une date valide (ISO).",
                    number: "Veuillez fournir un numéro valide.",
                    digits: "Veuillez fournir seulement des chiffres.",
                    creditcard: "Veuillez fournir un numéro de carte de crédit valide.",
                    equalTo: "Veuillez fournir encore la même valeur.",
                    notEqualTo: "Veuillez fournir une valeur différente, les valeurs ne doivent pas être identiques.",
                    extension: "Veuillez fournir une valeur avec une extension valide.",
                    maxlength: $.validator.format( "Veuillez fournir au plus {0} caractères." ),
                    minlength: $.validator.format( "Veuillez fournir au moins {0} caractères." ),
                    rangelength: $.validator.format( "Veuillez fournir une valeur qui contient entre {0} et {1} caractères." ),
                    range: $.validator.format( "Veuillez fournir une valeur entre {0} et {1}." ),
                    max: $.validator.format( "Veuillez fournir une valeur inférieure ou égale à {0}." ),
                    min: $.validator.format( "Veuillez fournir une valeur supérieure ou égale à {0}." ),
                    step: $.validator.format( "Veuillez fournir une valeur multiple de {0}." ),
                    maxWords: $.validator.format( "Veuillez fournir au plus {0} mots." ),
                    minWords: $.validator.format( "Veuillez fournir au moins {0} mots." ),
                    rangeWords: $.validator.format( "Veuillez fournir entre {0} et {1} mots." ),
                    letterswithbasicpunc: "Veuillez fournir seulement des lettres et des signes de ponctuation.",
                    alphanumeric: "Veuillez fournir seulement des lettres, nombres, espaces et soulignages.",
                    lettersonly: "Veuillez fournir seulement des lettres.",
                    nowhitespace: "Veuillez ne pas inscrire d'espaces blancs.",
                    ziprange: "Veuillez fournir un code postal entre 902xx-xxxx et 905-xx-xxxx.",
                    integer: "Veuillez fournir un nombre non décimal qui est positif ou négatif.",
                    vinUS: "Veuillez fournir un numéro d'identification du véhicule (VIN).",
                    dateITA: "Veuillez fournir une date valide.",
                    time: "Veuillez fournir une heure valide entre 00:00 et 23:59.",
                    phoneUS: "Veuillez fournir un numéro de téléphone valide.",
                    phoneUK: "Veuillez fournir un numéro de téléphone valide.",
                    mobileUK: "Veuillez fournir un numéro de téléphone mobile valide.",
                    strippedminlength: $.validator.format( "Veuillez fournir au moins {0} caractères." ),
                    email2: "Veuillez fournir une adresse électronique valide.",
                    url2: "Veuillez fournir une adresse URL valide.",
                    creditcardtypes: "Veuillez fournir un numéro de carte de crédit valide.",
                    ipv4: "Veuillez fournir une adresse IP v4 valide.",
                    ipv6: "Veuillez fournir une adresse IP v6 valide.",
                    require_from_group: $.validator.format( "Veuillez fournir au moins {0} de ces champs." ),
                    nifES: "Veuillez fournir un numéro NIF valide.",
                    nieES: "Veuillez fournir un numéro NIE valide.",
                    cifES: "Veuillez fournir un numéro CIF valide.",
                    postalCodeCA: "Veuillez fournir un code postal valide.",
                    pattern: "Format non valide."
                } );
            });
        </script>
    </head>
<body>
    <form action="#" name="registration" id="registration">
        <input id="email" type="email" class="form-control @error('email') is-invalid @enderror txt_forms" name="email" value="{{ old('email') }}" placeholder="{{ __('texts.email') }}" autocomplete="email" autofocus />
        <br>
        <input name="submit" type="submit" id="submit" class="submit" value="Submit">
    </form>
</body>
</html>

Translating the HTML5 input field validation message issue

1 Answers1