2015-05-06 2 views
4

Я создал страницу, в которой у меня есть раскрывающийся список языков, после выбора языка, тогда проверка полей должна быть на этом конкретном языке. Допустим, я выбираю арабский язык, тогда проверка должна быть на арабском языке. Я использую плагин jQuery-Form-Validator, но не знаю, как переключить проверку на основе языка.Проверка на основе языка с использованием jquery

мой код, как указано ниже

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> 

Может кто-нибудь пожалуйста, скажите мне решение этой

+0

Что вы имеете в виду проверку на арабском языке? Электронная почта всегда на английском языке, а длина текстового поля одинаковая для всех языков –

+0

Я имею в виду текст проверки ......... –

+1

Он хочет изменить сообщения проверки в зависимости от языка формы – mplungjan

ответ

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

Посмотрите здесь, возможно, на интересный угол: http://stackoverflow.com/questions/6181886/how-to-change-jquery-validator-language-message – mplungjan

+0

@JHier вы можете дать мне jsfiddle –

+0

@ mplungjan, что классный материал –

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> 
+0

Вы проверили это? Также 'var currLang = $ ('# lang option: selected'). Attr ('value');' может быть записано 'var currLang = $ ('# lang"). Val(); 'или просто' this.value ' – mplungjan

+0

да, я пробовал это –

+0

. Правильно ли я предполагаю, что вы построили свое решение на моем исходном jsfiddle и что моя проблема в том, что я использовал .data вместо .attr – mplungjan

2

Вот мое первоначальное предложение, фиксированное - обратите внимание, я добавил идентификатор пользователя и адрес электронной почты

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>

0

Вы прошли через этот пост на StackOverflow here это решение сделает вашу жизнь более легким уважением, Omer Аслам

Смежные вопросы