有没有一种简单的方法可以更改jQuery验证插件中的默认错误值?
我只想重写错误消息以使其对我的应用程序更加个性化-我有很多字段,所以我不想为字段x单独设置消息...我知道我可以做到!
有没有一种简单的方法可以更改jQuery验证插件中的默认错误值?
我只想重写错误消息以使其对我的应用程序更加个性化-我有很多字段,所以我不想为字段x单独设置消息...我知道我可以做到!
Answers:
将此代码添加到验证插件后附带的单独文件/脚本中以覆盖消息,请随意编辑:)
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}.")
});
您可以在验证调用中指定自己的消息。从Validation插件文档(http://jquery.bassistance.de/validate/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")
}
}
});
完整的validate(...)API:http : //jqueryvalidation.org/validate
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" ...
或者,在所有字段上使用单个short data-msg属性的更通用的解决方案:
<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."
}
});
});
我从来没有想过这会那么容易,我当时正在从事处理此类验证的项目。
下面的答案对于想要不费力气地更改验证消息的人将大有帮助。
以下方法使用“占位符名称”代替“此字段”。
您可以轻松修改内容
// 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"
如果您需要一些更重的东西,则可以使用带有所有值的变量完全自定义内容,这些变量将传递给validate函数。请参考此链接以获取全部详细信息-https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable
jQuery表单验证自定义错误消息-tutsmake
$(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>