Question

我创建了一个页面，其中我有一个语言选择下拉列表，在选择一种语言后，字段的验证应该使用该特定语言。让我们说我选择阿拉伯语，然后验证应该是阿拉伯语。我使用的是jQuery-Form-Validator插件，但不知道如何切换基于语言的验证。

我的代码如下所示

HTML

Select Language:<select>
    <option value="english">English</option>
    <option value="arabic">Arabic</option>
</select>
<form action="" id="myForm">
  <p>
    Name:<input name="user" data-validation="length" data-validation-length="min5" data-validation-error-msg="Maximum Length is 5"/>
  </p>
   <p>
    Email:<input type="text" data-validation="email" data-validation-error-msg="Invalid Email"/>
  </p>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

任何人都可以告诉我一些解决方案吗

Answer 1

<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="Content-Language" charset="UTF-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="formValidator.js"></script>
    <style>
        .add{

        }
    </style>
</head>
<body>
    See errors in your language :
    <select id="lang" >
        <option value="en">English</option>
        <option value="ar">Arabic</option>
        <option value="mr">Marathi</option>
        <option value="hi">Hindi</option>
        <!-- add more language option -->
    </select>
<form action="" id="myForm">
  <p>
    Name:<input id="name" name="user" data-validation="length" data-validation-length="min5" data-validation-error-msg="Maximum Length is 5"/>
  </p>
   <p>
    Email:<input id="email" type="text" data-validation="email" data-validation-error-msg="Invalid Email"/>
  </p>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>
    <script>
        var validations = {
            "en" : {
                "name"  : "Maximum Length is 5",
                "email" : "Invalid Email"
            },
            "ar" : {
                "name"  : "أقصى طول هو 5",
                "email" : "بريد إلكتروني خاطئ"
            },
            "mr" : {
                "name"  : "कमाल लांबी 5",
                "email" : "अवैध ईमेल"
            },
            "hi" : {
                "name"  : "अधिकतम लंबाई 5",
                "email" : "अवैध ईमेल"
            }
            //add more errors in your language
        };
        $("#lang").on('change', function(){
            var currLang = $('#lang option:selected').attr('value');
            $("#name").attr('data-validation-error-msg',validations[currLang].name);
            $("#email").attr('data-validation-error-msg',validations[currLang].email);
        });
        $.validate({
        });
    </script>
</body>
</html>

Answer 2

这是我的原始建议，已修复 - 请注意我已将ID添加到用户并发送电子邮件

var msg = {
    "ar": {
        invalidEmail: 'بريد إلكتروني خاطئ',
        maxLength: 'أقصى طول هو 5'
    },
    "en": {
        invalidEmail: 'Invalid Email',
        maxLength: 'Maximum Length is 5'
    }
}
$(function () {
    $.validate({});
    $("#lang").on("change", function () {
        var msgs = msg[this.value];
// NOTE using .data does NOT work! 
        $("#user").attr("data-validation-error-msg", msgs.maxLength);
        $("#email").attr("data-validation-error-msg", msgs.invalidEmail);
    }).change();
});

.error {
    color:red;
}
.input-validation-error {
    border:1px solid red;
}
h1 {
    font-weight:bold;
}
#debug {
    font-size:small;
}

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.1/jquery.form-validator.min.js"></script>

Select Language:
<select id="lang">
    <option value="en">English</option>
    <option value="ar">Arabic</option>
</select>
<form action="" id="myForm">
    <p>Name:
        <input id="user" name="user" data-validation="length" data-validation-length="min5" />
    </p>
    <p>Email:
        <input id="email" name="email" type="text" data-validation="email" />
    </p>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

这是另一个建议 - 请注意我正在使用此插件：http://jqueryvalidation.org/

var msg = {
    ar: {
        invalidEmail: 'بريد إلكتروني خاطئ',
        maxLength: 'أقصى طول هو 5'
    },
    en: {
        invalidEmail: 'Invalid Email',
        maxLength: 'Maximum Length is 5'
    }
}
$(function () {
    $("#myForm").validate({
        user: {
            required: true,
            length: 5
        },
        email: {
            required: true,
            email:true
        }
    });

    $("#lang").on("change", function () {
        var lang = this.value;
        $("#user").rules("add", {
            messages: {
                required: msg[lang].maxLength,
                length: msg[lang].maxLength
            }
        });
        $("#email").rules("add", {
            messages: {
                required: msg[lang].invalidEmail,
                email: msg[lang].invalidEmail
            }
        });
    }).change();
});

.error {
    color:red;
}
.input-validation-error {
    border:1px solid red;
}
h1 {
    font-weight:bold;
}
#debug {
    font-size:small;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
Select Language:
<select id="lang">
    <option value="en">English</option>
    <option value="ar" selected>Arabic</option>
</select>
<form action="" id="myForm">
    <p>Name:
        <input id="user" name="user" class="required" />
    </p>
    <p>Email:
        <input name="email" id="email" class="required" type="text"/>
    </p>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

Answer 3

$("select").on("change", function() {
  $("#name-input").data("validation-error-msg", errorMsgInDiffLang);
});

Answer 4

您是否在StackOverflow上发表了这篇文章here这个解决方案会让您的生活更轻松

使用jquery

4 个答案: