每当单击“提交”按钮时,需要字段验证器触发时更改文本框的颜色。
每当单击“提交”按钮时,需要字段验证器触发时更改文本框的颜色。
function fnOnUpdateValidators()
{
for (var i = 0; i < Page_Validators.length; i++)
{
var val = Page_Validators[i];
var ctrl = document.getElementById(val.controltovalidate);
if (ctrl != null && ctrl.style != null)
{
if (!val.isvalid)
ctrl.style.background = '#FFAAAA';
else
ctrl.style.backgroundColor = '';
}
}
}
最后一步是将脚本注册到 OnSubmit 事件:
VB.NET:
Page.ClientScript.RegisterOnSubmitStatement(Me.GetType, "val", "fnOnUpdateValidators();")
C#:
Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "val", "fnOnUpdateValidators();");
你将会在所有的代码后端中保持正确的IsValid状态,并且它可以与所有控件一起工作。
注意:我从这篇博客中找到了这个解决方案。我只是想将其记录在这里,以防源博客失效。
您可以非常容易地覆盖ASP.NET更新已验证字段的显示的JavaScript函数。这是一个不错的选择,因为您可以保留现有的字段验证器,而无需编写任何自定义验证逻辑或查找要验证的字段。在下面的示例中,我将向具有类“control-group”的父元素添加/删除“error”类(因为我正在使用Twitter Bootstrap CSS):
/**
* Re-assigns the ASP.NET validation JS function to
* provide a more flexible approach
*/
function UpgradeASPNETValidation() {
if (typeof (Page_ClientValidate) != "undefined") {
AspValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
}
}
/**
* This function is called once for each Field Validator, passing in the
* Field Validator span, which has helpful properties 'isvalid' (bool) and
* 'controltovalidate' (string = id of the input field to validate).
*/
function NicerValidatorUpdateDisplay(val) {
// Do the default asp.net display of validation errors (remove if you want)
AspValidatorUpdateDisplay(val);
// Add our custom display of validation errors
if (val.isvalid) {
// do whatever you want for invalid controls
$('#' + val.controltovalidate).closest('.control-group').removeClass('error');
} else {
// reset invalid controls so they display as valid
$('#' + val.controltovalidate).closest('.control-group').addClass('error');
}
}
// Call UpgradeASPNETValidation after the page has loaded so that it
// runs after the standard ASP.NET scripts.
$(document).ready(UpgradeASPNETValidation);
你可以使用CustomValidator代替RequiredFieldValidator:
.ASPX
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage=""
ControlToValidate="TextBox1" ClientValidationFunction="ValidateTextBox"
OnServerValidate="CustomValidator1_ServerValidate"
ValidateEmptyText="True"></asp:CustomValidator>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
function ValidateTextBox(source, args)
{
var is_valid = $("#TextBox1").val() != "";
$("#TextBox1").css("background-color", is_valid ? "white" : "red");
args.IsValid = is_valid;
}
</script>
.CS
:这是一个文件扩展名,通常用于C#编程语言中的源代码文件。protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
bool is_valid = TextBox1.Text != "";
TextBox1.BackColor = is_valid ? Color.White : Color.Red;
args.IsValid = is_valid;
}
客户端和服务器的验证函数逻辑相同,但客户端函数使用jQuery访问文本框的值并修改其背景颜色。
function ValidateTextBox(source, args)
{
var target = document.getElementById("TextBox1");
var is_valid = target.value != "";
if( is_valid ){
target.style.backgroundColor = "White";
}else{
target.style.backgroundColor = "Red";
}
args.IsValid = is_valid;
}
- Travis J<script>
/**
* Re-assigns the ASP.NET validation JS function to
* provide a more flexible approach
*/
function UpgradeASPNETValidation() {
if (typeof (Page_ClientValidate) != "undefined") {
AspValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
AspValidatorValidate = ValidatorValidate;
ValidatorValidate = NicerValidatorValidate;
// Remove the error class on each control group before validating
// Store a reference to the ClientValidate function
var origValidate = Page_ClientValidate;
// Override with our custom version
Page_ClientValidate = function (validationGroup) {
// Clear all the validation classes for this validation group
for (var i = 0; i < Page_Validators.length; i++) {
if ((typeof(Page_Validators[i].validationGroup) == 'undefined' && !validationGroup) ||
Page_Validators[i].validationGroup == validationGroup) {
$("#" + Page_Validators[i].controltovalidate).parents('.form-group').each(function () {
$(this).removeClass('has-error');
});
}
}
// Call the original function
origValidate(validationGroup);
};
}
}
/**
* This function is called once for each Field Validator, passing in the
* Field Validator span, which has helpful properties 'isvalid' (bool) and
* 'controltovalidate' (string = id of the input field to validate).
*/
function NicerValidatorUpdateDisplay(val) {
// Do the default asp.net display of validation errors (remove if you want)
AspValidatorUpdateDisplay(val);
// Add our custom display of validation errors
// IF we should be paying any attention to this validator at all
if ((typeof (val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, AspValidatorValidating)) {
if (!val.isvalid) {
// Set css class for invalid controls
var t = $('#' + val.controltovalidate).parents('.form-group:first');
t.addClass('has-error');
}
}
}
function NicerValidatorValidate(val, validationGroup, event) {
AspValidatorValidating = validationGroup;
AspValidatorValidate(val, validationGroup, event);
}
// Call UpgradeASPNETValidation after the page has loaded so that it
// runs after the standard ASP.NET scripts.
$(function () {
UpgradeASPNETValidation();
});
</script>
我喜欢Rory的答案,但在我的情况下,它与ValidationGroups不兼容,因为我在一个字段上有两个由两个不同按钮触发的验证器。
问题在于,如果ValidatorValidate不在当前ValidationGroup中,它将把验证器标记为“isValid”,但我们的类更改代码没有注意到这一点。这意味着显示不正确(特别是IE9似乎不想播放)。
因此,为了解决这个问题,我进行了以下更改:
/**
* Re-assigns the ASP.NET validation JS function to
* provide a more flexible approach
*/
function UpgradeASPNETValidation() {
if (typeof (Page_ClientValidate) != "undefined") {
AspValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
AspValidatorValidate = ValidatorValidate;
ValidatorValidate = NicerValidatorValidate;
}
}
/**
* This function is called once for each Field Validator, passing in the
* Field Validator span, which has helpful properties 'isvalid' (bool) and
* 'controltovalidate' (string = id of the input field to validate).
*/
function NicerValidatorUpdateDisplay(val) {
// Do the default asp.net display of validation errors (remove if you want)
AspValidatorUpdateDisplay(val);
// Add our custom display of validation errors
// IF we should be paying any attention to this validator at all
if ((typeof (val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, AspValidatorValidating)) {
if (val.isvalid) {
// do whatever you want for invalid controls
$('#' + val.controltovalidate).parents('.control-group:first').removeClass('error');
} else {
// reset invalid controls so they display as valid
//$('#' + val.controltovalidate).parents('.control-group:first').addClass('error');
var t = $('#' + val.controltovalidate).parents('.control-group:first');
t.addClass('error');
}
}
}
function NicerValidatorValidate(val, validationGroup, event) {
AspValidatorValidating = validationGroup;
AspValidatorValidate(val, validationGroup, event);
}
// Call UpgradeASPNETValidation after the page has loaded so that it
// runs after the standard ASP.NET scripts.
$(document).ready(UpgradeASPNETValidation);
.form-control
{
width: 100px;
height: 34px;
padding: 6px 12px;
font-size: 14px;
color: black;
background-color: white;
}
.form-control-Error
{
width: 100px;
height: 34px;
padding: 6px 12px;
font-size: 14px;
color: #EBB8C4;
background-color: #F9F2F4
border: 1px solid #DB7791;
border-radius: 4px;
}
在您的页面中:
<asp:TextBox ID="txtUserName" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidatorrunat="server"Display="Dynamic" ErrorMessage="PLease Enter UserName" ControlToValidate="txtUserName"></asp:RequiredFieldValidator>
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
for (var i in Page_Validators) {
try {
var control = document.getElementById(Page_Validators[i].controltovalidate);
if (!Page_Validators[i].isvalid) {
control.className = "form-control-Error";
} else {
control.className = "form-control";
}
} catch (e) { }
}
return false;
}
return true;
}
</script>
我喜欢亚历山大的答案,但希望javascript更加通用。因此,这里提供一种通用的方法来消耗自定义验证器中的错误。
function ValidateTextBox(source, args) {
var cntrl_id = $(source).attr("controltovalidate");
var cntrl = $("#" + cntrl_id);
var is_valid = $(cntrl).val() != "";
is_valid ? $(cntrl).removeClass("error") : $(cntrl).addClass("error");
args.IsValid = is_valid;
}
我知道这已经有点老了,但是我有另一种修改版的组合来自Dillie-O和Alexander。 这使用jQuery与模糊事件来在验证成功时移除样式。
function validateFields() {
try {
var count = 0;
var hasFocus = false;
for (var i = 0; i < Page_Validators.length; i++) {
var val = Page_Validators[i];
var ctrl = document.getElementById(val.controltovalidate);
validateField(ctrl, val);
if (!val.isvalid) { count++; }
if (!val.isvalid && hasFocus === false) {
ctrl.focus(); hasFocus = true;
}
}
if (count == 0) {
hasFocus = false;
}
}
catch (err) { }
}
function validateField(ctrl, val)
{
$(ctrl).blur(function () { validateField(ctrl, val); });
if (ctrl != null && $(ctrl).is(':disabled') == false) { // && ctrl.style != null
val.isvalid ? $(ctrl).removeClass("error") : $(ctrl).addClass("error");
}
if ($(ctrl).hasClass('rdfd_') == true) { //This is a RadNumericTextBox
var rtxt = document.getElementById(val.controltovalidate + '_text');
val.isvalid ? $(rtxt).removeClass("error") : $(rtxt).addClass("error");
}
}
<asp:CustomValidator ID="CustomValidatorMyTextBox" runat="server" ErrorMessage=""
Display="None" ClientValidationFunction="ValidateInput"
ControlToValidate="MyTextBox" ValidateEmptyText="true"
ValidationGroup="MyValidationGroup">
</asp:CustomValidator>
或者它也可以用于下拉列表,需要进行选择的情况。CustomValidator与上面相同,但ControlToValidate指向下拉列表。
对于客户端脚本,请使用JQuery。ValidateInput方法如下:
<script type="text/javascript">
function ValidateInput(source, args)
{
var controlName = source.controltovalidate;
var control = $('#' + controlName);
if (control.is('input:text')) {
if (control.val() == "") {
control.addClass("validation");
args.IsValid = false;
}
else {
control.removeClass("validation");
args.IsValid = true;
}
}
else if (control.is('select')) {
if (control.val() == "-1"[*] ) {
control.addClass("validation");
args.IsValid = false;
}
else {
control.removeClass("validation");
args.IsValid = true;
}
}
}
</script>
.validation { border: solid 2px red; }
PS:为了使下拉列表在IE中的边框颜色生效,请在页面头部添加以下meta标签:<meta http-equiv="X-UA-Compatible" content="IE=edge" />
。
[*]这与RequiredFieldValidator的“InitialValue”相同。当用户尚未选择任何内容时,这是默认选择的项目。
我也喜欢亚历山大和史蒂夫的答案,但我想要与代码后台相同的结果。我认为这段代码可能可以实现,但它取决于您的设置。我的控件位于内容占位符内。
protected void cvPhone_ServerValidate(object source, ServerValidateEventArgs args)
{
bool is_valid = !string.IsNullOrEmpty(args.Value);
string control = ((CustomValidator)source).ControlToValidate;
((TextBox)this.Master.FindControl("ContentBody").FindControl(control)).CssClass = is_valid ? string.Empty : "inputError";
args.IsValid = is_valid;
}