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}.")
});

小开

而不是改变插件源代码，你可以包括一个额外的js文件，格式类似于下载本地化文件夹中的那些，并在加载validation.js后包括那个文件

jQuery.extend(jQuery.validator.messages, {
required: ...,
maxlength: jQuery.validator.format(...),
...
});

小开

您可以在验证调用中指定自己的消息。从验证插件文档(http://jquery.bassistance.de/validate/demo/milk/)中使用的Remember the 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

小开

另一种可能的解决方案是遍历字段，向每个字段添加相同的错误消息。

$('.required').each(function(index) {
$(this).rules("add", {
messages: {
required: "Custom error message."
}
});
});

小开

这招对我很管用:

$.validator.messages.required = 'required';

小开

删除所有默认错误消息

$.validator.messages.required = "";

小开

最新版本有一些不错的内联功能。

如果它是一个简单的输入字段，你可以像这样添加属性data-validation-error-msg——

data-validation-error-msg="Invalid Regex"

如果你需要一些更重的东西，你可以使用一个带有传递给validate函数的所有值的变量来完全自定义东西。详细信息请参考此链接——https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

小开

我们可以指定文本字段的类型来代替这些自定义错误消息。

示例:设置字段类型为type = 'email'

然后插件将识别字段并正确验证。

小开

这招对我很管用:

// 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.",
}
}
})

小开

@Josh:你可以从你的资源包中翻译消息来扩展你的解决方案

<script type="text/javascript">
$.validator.messages.number = '@Html.Raw(@Resources.General.ErrorMessageNotANumber)';
</script>

如果你把这段代码放到你的_Layout中。cshtml (MVC)，它可用于所有视图

小开

因为我们已经使用了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')
}
// ...
});

小开

我从未想过这是如此容易，我正在从事一个处理此类验证的项目。

下面的答案将对那些想要轻松更改验证消息的人有很大帮助。

下面的方法使用“占位符名称”来代替“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表单验证自定义错误消息-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>

小开

$(function() {


$("#username_error_message").hide();
$("#password_error_message").hide();
$("#retype_password_error_message").hide();
$("#email_error_message").hide();


var error_username = false;
var error_password = false;
var error_retype_password = false;
var error_email = false;


$("#form_username").focusout(function() {


check_username();
    

});


$("#form_password").focusout(function() {


check_password();
    

});


$("#form_retype_password").focusout(function() {


check_retype_password();
    

});


$("#form_email").focusout(function() {


check_email();
    

});


function check_username() {


var username_length = $("#form_username").val().length;
    

if(username_length < 5 || username_length > 20) {
$("#username_error_message").html("Should be between 5-20 characters");
$("#username_error_message").show();
error_username = true;
} else {
$("#username_error_message").hide();
}


}


function check_password() {


var password_length = $("#form_password").val().length;
    

if(password_length < 8) {
$("#password_error_message").html("At least 8 characters");
$("#password_error_message").show();
error_password = true;
} else {
$("#password_error_message").hide();
}


}


function check_retype_password() {


var password = $("#form_password").val();
var retype_password = $("#form_retype_password").val();
    

if(password !=  retype_password) {
$("#retype_password_error_message").html("Passwords don't match");
$("#retype_password_error_message").show();
error_retype_password = true;
} else {
$("#retype_password_error_message").hide();
}


}


function check_email() {


var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);


if(pattern.test($("#form_email").val())) {
$("#email_error_message").hide();
} else {
$("#email_error_message").html("Invalid email address");
$("#email_error_message").show();
error_email = true;
}


}


$("#registration_form").submit(function() {
                                        

error_username = false;
error_password = false;
error_retype_password = false;
error_email = false;
                                        

check_username();
check_password();
check_retype_password();
check_email();
    

if(error_username == false && error_password == false && error_retype_password == false && error_email == false) {
return true;
} else {
return false;
}


});


});

小开

添加自定义或字段标签或任何与正在验证的字段相关的动态标签。你可以从dom中选择任何东西，并将其添加到任何地方，并提示错误

下面是在required消息开头添加字段标签而不是“this field"”的示例。

jQuery.extend(jQuery.validator.messages, {


required: function(result,e){


let field_label = "This field ";


if($(e).closest('.form-group').find('label').length > 0)
field_label = $(e).closest('.form-group').find('label').html();


return field_label+" is required.";


},


});