有一个简单的方法来改变默认的错误值在jQuery验证插件?
我只是想重写错误消息,以使我的应用程序更加个性化——我有很多字段,所以我不想为字段x单独设置消息……我知道我能做到!
有一个简单的方法来改变默认的错误值在jQuery验证插件?
我只是想重写错误消息,以使我的应用程序更加个性化——我有很多字段,所以我不想为字段x单独设置消息……我知道我能做到!
当前回答
将此代码添加到验证插件后包含的单独文件/脚本中,以覆盖消息,随意编辑:)
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}.")
});
其他回答
我们可以指定文本字段的类型来代替这些自定义错误消息。
示例:设置字段类型为type = 'email'
然后插件将识别字段并正确验证。
jQuery表单验证自定义错误消息-tutsmake
Demo
$(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>
最新版本有一些不错的内联功能。
如果它是一个简单的输入字段,您可以像这样添加属性data-validation-error-msg
data-validation-error-msg="Invalid Regex"
如果你需要一些更重的东西,你可以使用一个带有传递给validate函数的所有值的变量来完全自定义东西。详细信息请参考这个链接:https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable
我从未想过这是如此容易,我正在从事一个处理此类验证的项目。
下面的答案将对那些想要轻松更改验证消息的人有很大帮助。
下面的方法使用“占位符名称”来代替“This Field”。
你可以很容易地修改东西
// 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
});
});
因为我们已经使用了JQuery,我们可以让页面设计者在标记中添加自定义消息,而不是代码:
<input ... data-msg-required="my message" ...
或者,更通用的解决方案是在所有字段上使用一个简短的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')
}
// ...
});