[送信]ボタンをクリックして必要なフィールドバリデーターが起動されるたびに、TextBoxの色を変更する必要があります
77836 次
16 に答える
26
できることは、送信後にグローバル Page_Validators 配列を反復処理する Javascript 関数を登録することであり、背景を適切に設定できます。これの良いところは、ページ上のすべてのコントロールで使用できることです。関数は次のようになります。
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 ステータスを維持し、すべてのコントロールを操作できます。
注: この解決策は、次のブログから見つけました。ソースのブログがダウンした場合に備えて、ここに記録したかっただけです。
于 2010-03-18T18:59:44.163 に答える
18
検証済みフィールドの表示を更新する ASP.NET の JavaScript 関数を非常に簡単にオーバーライドできます。これは、既存のフィールド バリデーターを保持でき、カスタム検証ロジックを記述したり、検証するフィールドを探したりする必要がないため、優れたオプションです。以下の例では、クラス 'control-group' を持つ親要素から 'error' クラスを追加/削除しています (私はtwitter ブートストラップ 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);
于 2012-08-14T14:13:27.747 に答える
13
RequiredFieldValidator の代わりに CustomValidator を使用できます。
.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
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 を使用してテキスト ボックスの値にアクセスし、背景色を変更します。
于 2008-10-13T08:17:17.027 に答える
4
Roryの答えは気に入りましたが、ValidationGroupsではうまく機能しません.1つのフィールドに2つの異なるボタンによってトリガーされる2つのバリデーターがある私の例では確かにそうです。
問題は、バリデーターが現在の ValidationGroup にない場合、ValidatorValidate がそのバリデーターを「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);
于 2012-10-12T13:08:24.053 に答える
4
CSSで：
.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>
于 2014-09-01T09:39:23.033 に答える
3
私はアレクサンダーの答えが好きでしたが、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;
}
于 2010-03-27T14:00:57.130 に答える
2
私はこれが古いことを知っていますが、Dillie-OとAlexanderからの別の変更された組み合わせがあります。これは、blurイベントで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");
}
}
于 2011-08-18T15:32:52.827 に答える
2
別の可能性...このコードは、検証するコントロールに赤い境界線（またはCSSクラス内に配置したもの）を提供します（ドロップダウンリストとテキストボックスで機能しますが、ボタンなどに拡張できます...）
まず、RequiredFieldValidator の代わりにCustomValidatorを使用します。これは、CustomValidator のClientValidationFunctionを使用して、検証するコントロールの CSS を変更できるためです。
例: ユーザーが入力を忘れたときに、テキスト ボックス MyTextBox の境界線を変更します。MyTextBox コントロールの CustomValidator は次のようになります。
<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>
「検証」クラスは、バリデーターが起動されたときのマークアップを含む CSS クラスです。次のようになります。
.validation { border: solid 2px red; }
PS: IE のドロップダウン リストで境界線の色を機能させるには、次のメタ タグをページの見出しに追加します<meta http-equiv="X-UA-Compatible" content="IE=edge" />。
[*]これは RequiredFieldValidator の「InitialValue」と同じです。これは、ユーザーがまだ何も選択していない場合にデフォルトとして選択される項目です。</p>
于 2012-05-31T07:26:52.857 に答える
1
別の方法、
$(document).ready(function() {
HighlightControlToValidate();
$('#<%=btnSave.ClientID %>').click(function() {
if (typeof (Page_Validators) != "undefined") {
for (var i = 0; i < Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid) {
$('#' + Page_Validators[i].controltovalidate).css("background", "#f3d74f");
}
else {
$('#' + Page_Validators[i].controltovalidate).css("background", "white");
}
}
}
});
});
于 2011-11-26T14:25:31.517 に答える
1
私もアレクサンダーとスティーブの答えが好きでしたが、コードビハインドと同じものが欲しかったのです。このコードでできると思いますが、セットアップによって異なります。私のコントロールは contentplaceholder の中にあります。
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;
}
于 2010-07-01T12:27:02.543 に答える
0
ユーザーが使用していたコントロールを変更しないと正確ではありませんが、この方法の方が簡単だと思います（完全な例を書いていないため、必要ではないと思います）：
ASP.NET:
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:CustomValidator runat="server" ControlToValidate="TextBox1" Display="Dynamic" Text="TextBox1 Not Set" ValidateEmptyText="true" OnServerValidate="ServerValidate" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Execute" />
コード：
protected void Execute(object sender, EventArgs e)
{
Page.Validate();
if (Page.IsValid)
{
*some code*
}
}
protected void ServerValidate(object source, ServerValidateEventArgs args)
{
CustomValidator cval = source as CustomValidator;
if (cval == null)
{
args.IsValid = false;
return;
}
if (string.IsNullOrEmpty(args.Value))
{
args.IsValid = false;
string _target = cval.ControlToValidate;
TextBox tb = cval.Parent.FindControl(_target) as TextBox;
tb.BorderColor = System.Drawing.Color.Red;
}
else
{
args.IsValid = true;
}
}
于 2014-05-30T11:00:06.760 に答える
0
トリックを実行する自己完結型の HTML/JS を次に示します。
<html>
<head>
<script type="text/javascript">
function mkclr(cntl,clr) {
document.getElementById(cntl).style.backgroundColor = clr;
};
</script>
</head>
<body>
<form>
<input type="textbox" id="tb1"></input>
<input type="submit" value="Go"
onClick="javascript:mkclr('tb1','red');">
</input>
</form>
</body>
</html>
于 2008-10-13T07:27:31.153 に答える
0
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Custemvalidatin.aspx.cs" Inherits="AspDotNetPractice.Custemvalidatin" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function vali(source, args) {
if (document.getElementById(source.controltovalidate).value.length > 0) {
args.IsValid = true;
document.getElementById(source.controltovalidate).style.borderColor = 'green';
}
else {
args.IsValid = false;
document.getElementById(source.controltovalidate).style.borderColor = 'red';
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" Style="border:1px solid gray; width:270px; height:24px ; border-radius:6px;" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="TextBox1"
ErrorMessage="Enter First Name" SetFocusOnError="True" Display="Dynamic" ClientValidationFunction="vali"
ValidateEmptyText="True" Font-Size="Small" ForeColor="Red">Enter First Name</asp:CustomValidator><br /><br /><br />
<asp:TextBox ID="TextBox2" Style="border:1px solid gray; width:270px; height:24px ; border-radius:6px;" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator2" runat="server" ClientValidationFunction="vali"
ControlToValidate="TextBox2" Display="Dynamic" ErrorMessage="Enter Second Name"
SetFocusOnError="True" ValidateEmptyText="True" Font-Size="Small" ForeColor="Red">Enter Second Name</asp:CustomValidator><br />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
于 2013-03-26T13:57:34.857 に答える
0
私の仕事を得るために、スティーブの提案にいくつかの変更を加える必要がありました。
function ValidateTextBox(source, args) {
var controlId = document.getElementById(source.controltovalidate).id;
var control = $("#" + controlId);
var value = control.val();
var is_valid = value != "";
is_valid ? control.removeClass("error") : control.addClass("error");
args.IsValid = is_valid;
}
素晴らしい例ですが、まさに私が必要としていたものです。
于 2013-03-04T11:49:17.443 に答える