Geek Answers Handbook

Language validation using jquery

I created a page in which I have a drop-down list of languages, after choosing a language, then the field check should be in this particular language. Suppose I choose Arabic, then the check should be in Arabic. I am using the jQuery-Form-Validator plugin but don’t know how to switch the language based check.

my code is 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 someone tell me some solution for this

+4
source share
4 answers
<!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>
+2
source

Here is my initial suggestion, fixed - please note that I have added the user id and email address

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>
Run codeHide result

- , : 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>
Hide result
+2
$("select").on("change", function() {
  $("#name-input").data("validation-error-msg", errorMsgInDiffLang);
});
+1
source

Did you go through this post on StackOverflow here this solution would make your life easier

0
source

More articles:


All Articles