language based validation using jquery

Question

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

What you mean validation in Arabic? Email is always in English and text field length is same length in any languages — freethinker, May 06 '15 at 04:57
He wants to change the validation messages depending on form language — mplungjan, May 06 '15 at 04:58

score 2 · Answer 1 · answered May 06 '15 at 07:35

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

Did you test this? Also `var currLang = $('#lang option:selected').attr('value');` can be written `var currLang = $('#lang").val();` or just `this.value` — mplungjan, May 06 '15 at 08:09
So am I correct in assuming you built your solution on my original jsfiddle and that my problem was me using .data instead of .attr — mplungjan, May 06 '15 at 11:39

mplungjan · Answer 2 · 2015-05-06T12:11:54.720

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

Here another suggestion - please note I am using this plugin: 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>

score 1 · Answer 3 · edited May 06 '15 at 11:44

1

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

edited May 06 '15 at 11:44

mplungjan

169,008
28
173
236

answered May 06 '15 at 04:58

JHier

56
6

Have a look here for perhaps an interesting angle: http://stackoverflow.com/questions/6181886/how-to-change-jquery-validator-language-message – mplungjan May 06 '15 at 05:01
@JHier can you give me a jsfiddle – Alex Man May 06 '15 at 05:05
no...I have tried with the above code which JHier has given...but not working http://jsfiddle.net/uq27e3ou/8/ – Alex Man May 06 '15 at 05:45
@mplungjan in your jsfiddle, when i click submit the page is reloading but no validation is happening....... – Alex Man May 06 '15 at 05:46
@mplungjan my example which I have shown in the question works without reloading – Alex Man May 06 '15 at 05:47
So does my answer. Have a look – mplungjan May 06 '15 at 11:18
@JHier - this does not work by the way. Data is not registered – mplungjan May 06 '15 at 11:43

Muhammad Omer Aslam · Answer 4 · 2018-03-25T21:12:47.590

0

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

edited Mar 25 '18 at 21:12

answered May 07 '15 at 23:23

Muhammad Omer Aslam

22,976
9
42
68

language based validation using jquery

4 Answers4