翻译 HTML5 输入字段验证消息问题

Question

我的 laravel 申请中的朋友们，我的主要语言是法语。

在我的登录 blade 中，对于电子邮件地址字段，我使用了以下输入字段，

<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">

现在的问题是，每当我尝试输入无效的电子邮件格式（例如：eeeeeee）时，它都会显示 html5 英文错误消息

Please include '@' in the email address

因为我的主要语言是法语，所以我想用法语显示上面的消息

到目前为止，我已经尝试过使用 title 属性，但它也不起作用。

Answer 1

有多种方式供您选择解决方案很少：

解决方法一：

在输入字段的 this.setCustomValidity() 中添加您的自定义消息

<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>

方案二：

add/update 您在网站中的自定义消息 $.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>

翻译 HTML5 输入字段验证消息问题

Translating the HTML5 input field validation message issue

html

php

translation

laravel