JQuery বৈধতা প্লাগইনে ডিফল্ট ত্রুটি মানগুলি পরিবর্তন করার কোনও সহজ উপায় আছে ?
আমি আমার অ্যাপ্লিকেশনটিতে আরও ব্যক্তিগত হতে ত্রুটি বার্তাগুলি আবার লিখতে চাই - আমার অনেকগুলি ক্ষেত্র রয়েছে, তাই আমি ক্ষেত্রের জন্য পৃথকভাবে বার্তাটি সেট করতে চাই না ... আমি জানি আমি এটি করতে পারি!
উত্তর:
বার্তা ওভাররাইড করার জন্য বৈধতা প্লাগইন পরে অন্তর্ভুক্ত একটি পৃথক ফাইল / স্ক্রিপ্টে এই কোড যুক্ত করুন, ইচ্ছায় সম্পাদনা করুন :)
jQuery.extend(jQuery.validator.messages, {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});আপনি বৈধ কলটিতে নিজের বার্তাগুলি নির্দিষ্ট করতে পারেন। বৈধকরণ প্লাগইন ডকুমেন্টেশনে ( http://jquery.bassistance.de/uthorate/demo/milk/ ) ব্যবহৃত মিল্ক সাইনআপ ফর্মটি থেকে এই কোডটি উত্তোলন এবং সংক্ষেপণ , আপনি সহজেই নিজের বার্তা নির্দিষ্ট করতে পারেন:
var validator = $("#signupform").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2,
remote: "users.php"
}
},
messages: {
firstname: "Enter your firstname",
lastname: "Enter your lastname",
username: {
required: "Enter a username",
minlength: jQuery.format("Enter at least {0} characters"),
remote: jQuery.format("{0} is already in use")
}
}
});বৈধকরণের জন্য সম্পূর্ণ এপিআই (...): http://jqueryediaation.org/omotate
jQuery.format("...করতেjQuery.validator.format("...
এটি আমার পক্ষে কাজ করেছে:
$.validator.messages.required = 'required';$.validator.messages.maxlength = "Please enter no more than {0} characters.";
এটি আমার পক্ষে কাজ করেছে:
// Change default JQuery validation Messages.
$("#addnewcadidateform").validate({
rules: {
firstname: "required",
lastname: "required",
email: "required email",
},
messages: {
firstname: "Enter your First Name",
lastname: "Enter your Last Name",
email: {
required: "Enter your Email",
email: "Please enter a valid email address.",
}
}
})messagesঅপশনগুলিও রয়েছে $().fileupload।
যেহেতু আমরা ইতিমধ্যে JQuery ব্যবহার করছি, তাই আমরা পৃষ্ঠা ডিজাইনারকে কোডের পরিবর্তে মার্কআপে কাস্টম বার্তা যুক্ত করতে দিতে পারি:
<input ... data-msg-required="my message" ...বা, সমস্ত ক্ষেত্রে একক সংক্ষিপ্ত ডেটা-পিকচার গুণাবলী ব্যবহার করে আরও সাধারণ সমাধান:
<form id="form1">
<input type="text" id="firstName" name="firstName"
data-msg="Please enter your first name" />
<br />
<input type="text" id="lastName" name="lastName"
data-msg="Please enter your last name" />
<br />
<input type="submit" />
</form>এবং কোডটিতে এর পরে এমন কিছু রয়েছে:
function getMsg(selector) {
return $(selector).attr('data-msg');
}
$('#form1').validate({
// ...
messages: {
firstName: getMsg('#firstName'),
lastName: getMsg('#lastName')
}
// ...
});আর একটি সম্ভাব্য সমাধান হ'ল ক্ষেত্রগুলি লুপ করা, প্রতিটি ক্ষেত্রে একই ত্রুটি বার্তা যুক্ত করা।
$('.required').each(function(index) {
$(this).rules("add", {
messages: {
required: "Custom error message."
}
});
});প্লাগইন উত্স কোড পরিবর্তন করার পরিবর্তে আপনি ডাউনলোডের স্থানীয়করণ ফোল্ডারের মতো ফর্ম্যাটটিতে একটি অতিরিক্ত জেএস ফাইল অন্তর্ভুক্ত করতে পারেন এবং যাচাইকরণের পরে এটিতে অন্তর্ভুক্ত করতে পারেন jjs
jQuery.extend(jQuery.validator.messages, {
required: ...,
maxlength: jQuery.validator.format(...),
...
});@ জোশ: আপনি আপনার সংস্থান বান্ডেল থেকে অনূদিত বার্তায় আপনার সমাধানটি প্রসারিত করতে পারেন
<script type="text/javascript">
$.validator.messages.number = '@Html.Raw(@Resources.General.ErrorMessageNotANumber)';
</script>আপনি যদি এই কোডটি আপনার _ লেআউটসিএইচটিএমএল (এমভিসি) তে রেখে দেন তবে এটি আপনার সমস্ত দর্শনগুলির জন্য উপলব্ধ
আমি কখনও ভাবিনি যে এটি এত সহজ হবে, আমি এই জাতীয় বৈধতা হ্যান্ডেল করার জন্য একটি প্রকল্পে কাজ করছি।
নীচের উত্তরটি যিনি অনেক চেষ্টা ছাড়াই বৈধতা বার্তা পরিবর্তন করতে চান তাদের পক্ষে দুর্দান্ত সাহায্য করবে।
নীচের পন্থাগুলি "এই ক্ষেত্র" এর জায়গায় "স্থানধারকের নাম" ব্যবহার করে।
আপনি সহজে জিনিস পরিবর্তন করতে পারেন
// Jquery Validation
$('.js-validation').each(function(){
//Validation Error Messages
var validationObjectArray = [];
var validationMessages = {};
$(this).find('input,select').each(function(){ // add more type hear
var singleElementMessages = {};
var fieldName = $(this).attr('name');
if(!fieldName){ //field Name is not defined continue ;
return true;
}
// If attr data-error-field-name is given give it a priority , and then to placeholder and lastly a simple text
var fieldPlaceholderName = $(this).data('error-field-name') || $(this).attr('placeholder') || "This Field";
if( $( this ).prop( 'required' )){
singleElementMessages['required'] = $(this).data('error-required-message') || $(this).data('error-message') || fieldPlaceholderName + " is required";
}
if( $( this ).attr( 'type' ) == 'email' ){
singleElementMessages['email'] = $(this).data('error-email-message') || $(this).data('error-message') || "Enter valid email in "+fieldPlaceholderName;
}
validationMessages[fieldName] = singleElementMessages;
});
$(this).validate({
errorClass : "error-message",
errorElement : "div",
messages : validationMessages
});
}); নতুন সংস্করণে আপনি করতে পারেন এমন কিছু দুর্দান্ত ইন-লাইন জিনিস রয়েছে।
যদি এটি একটি সাধারণ ইনপুট ক্ষেত্র হয় তবে আপনি data-validation-error-msgএই জাতীয় বৈশিষ্ট্য যুক্ত করতে পারেন -
data-validation-error-msg="Invalid Regex"আপনার যদি কিছু ভারী কিছু প্রয়োজন হয় তবে আপনি ভেরিয়েট ফাংশনে উত্তীর্ণ সমস্ত মানগুলির সাথে একটি ভেরিয়েবল ব্যবহার করে জিনিসগুলি সম্পূর্ণরূপে কাস্টমাইজ করতে পারেন। সম্পূর্ণ বিবরণের জন্য এই লিঙ্কটি উল্লেখ করুন - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable
jQuery ফর্ম যাচাইকরণ কাস্টম ত্রুটি বার্তা -সুতসামেক
$(document).ready(function(){
$("#registration").validate({
// Specify validation rules
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
phone: {
required: true,
digits: true,
minlength: 10,
maxlength: 10,
},
password: {
required: true,
minlength: 5,
}
},
messages: {
firstname: {
required: "Please enter first name",
},
lastname: {
required: "Please enter last name",
},
phone: {
required: "Please enter phone number",
digits: "Please enter valid phone number",
minlength: "Phone number field accept only 10 digits",
maxlength: "Phone number field accept only 10 digits",
},
email: {
required: "Please enter email address",
email: "Please enter a valid email address.",
},
},
});
});<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Validation Using validator()</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<style>
.error{
color: red;
}
label,
input,
button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
.common_box_body {
padding: 15px;
border: 12px solid #28BAA2;
border-color: #28BAA2;
border-radius: 15px;
margin-top: 10px;
background: #d4edda;
}
</style>
</head>
<body>
<div class="common_box_body test">
<h2>Registration</h2>
<form action="#" name="registration" id="registration">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John"><br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Doe"><br>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" placeholder="8889988899"><br>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john@doe.com"><br>
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder=""><br>
<input name="submit" type="submit" id="submit" class="submit" value="Submit">
</form>
</div>
</body>
</html>এই কাস্টম ত্রুটি বার্তাগুলির পরিবর্তে আমরা পাঠ্য ক্ষেত্রের ধরণ নির্দিষ্ট করতে পারি।
উদা: টাইপের ক্ষেত্রে ক্ষেত্রের টাইপ = 'ইমেল'
তারপরে প্লাগইনটি ক্ষেত্রটি সনাক্ত করবে এবং সঠিকভাবে যাচাই করবে।