javascript - language based validation using jquery - Stack Overflow|江阴雨辰互联

I have created page in which I am having a language selection drop-down, upon selection a language, then the validation of the fields should be in that specific language. Lets say I am selecting Arabic, then validation should be in Arabic. I am using jQuery-Form-Validator plugin,but don't know how to switch the language based validation.

my code is as given below

JSFiddle

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>

Can anyone please tell me some solution for this

my code is as given below

JSFiddle

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>

Can anyone please tell me some solution for this

Share Improve this question edited May 6, 2015 at 11:45 vsync 131k59 gold badges340 silver badges423 bronze badges asked May 6, 2015 at 4:50 Alex Man 4,88619 gold badges106 silver badges190 bronze badges

What you mean validation in Arabic? Email is always in English and text field length is same length in any languages – freethinker Commented May 6, 2015 at 4:57
I mean the validation text......... – Alex Man Commented May 6, 2015 at 4:58
1 He wants to change the validation messages depending on form language – mplungjan Commented May 6, 2015 at 4:58
@mplungjan yes exactly...... – Alex Man Commented May 6, 2015 at 4:59

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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

Here is my original suggestion, fixed - please note I added ID to the user and email

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare./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>

Here another suggestion - please note I am using this plugin: http://jqueryvalidation/

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn./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>

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

Have you gone through this post on StackOverflow here this solution would make your life easier

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745288077a4620685.html

javascript - language based validation using jquery - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - language based validation using jquery - Stack Overflow

4 Answers 4

相关推荐