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
– freethinker, Commented May 6, 2015 at 4:57
He wants to change the validation messages depending on form language — mplungjan
– mplungjan, Commented May 6, 2015 at 4:58

Ritesh Dhuri · Accepted Answer · 2015-05-06 07:35:31Z

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>

answered May 6, 2015 at 7:35

Ritesh Dhuri

2152 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mplungjan Over a year ago

Did you test this? Also var currLang = $('#lang option:selected').attr('value'); can be written var currLang = $('#lang").val(); or just this.value

mplungjan Over a year ago

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 · Accepted Answer · 2015-05-06 12:11:54Z

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>

mplungjan · Accepted Answer · 2015-05-06 11:44:32Z

1

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

edited May 6, 2015 at 11:44

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered May 6, 2015 at 4:58

JHier

566 bronze badges

7 Comments

mplungjan Over a year ago

Have a look here for perhaps an interesting angle: stackoverflow.com/questions/6181886/…

Alex Man Over a year ago

@JHier can you give me a jsfiddle

Alex Man Over a year ago

no...I have tried with the above code which JHier has given...but not working jsfiddle.net/uq27e3ou/8

Alex Man Over a year ago

@mplungjan in your jsfiddle, when i click submit the page is reloading but no validation is happening.......

Alex Man Over a year ago

@mplungjan my example which I have shown in the question works without reloading

|

Muhammad Omer Aslam · Accepted Answer · 2018-03-25 21:12:47Z

0

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

edited Mar 25, 2018 at 21:12

answered May 7, 2015 at 23:23

Muhammad Omer Aslam

23.9k9 gold badges47 silver badges69 bronze badges

Collectives™ on Stack Overflow

language based validation using jquery

4 Answers 4

2 Comments

Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related