Change Text Box Color using Required Field Validator. No Extender Controls Please

前端未结

关注

 16  2140

广开言路

I need to change color of TextBox whenever its required field validator is fired on Clicking the Submit button

相关标签:

16条回答

野趣味

2020-11-28 07:40

I had to make a few changes to Steve's suggestion to get mine working,

 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;
  }

great example though, exactly what I needed.

0 讨论(0)

旧巷少年郎

2020-11-28 07:43

You could use CustomValidator instead of 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

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;
}

Logic in client and server validation functions is the same, but the client function uses jQuery to access textbox value and modify its background color.

0 讨论(0)

囚心锁ツ

2020-11-28 07:43

I liked Alexander's answer, but wanted the javascript to be more generic. So, here is a generic way of consuming the errors from a custom validator.

    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;
    }

0 讨论(0)

不知归路

2020-11-28 07:43

I too liked Alexanders and Steves answer but I wanted the same as in codebehind. I think this code might do it but it differes depending on your setup. My controls are inside a 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;
}

0 讨论(0)

温柔的废话

2020-11-28 07:43

Another way,

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

Reference: http://www.codedigest.com/Articles/ASPNET/414_Highlight_Input_Controls_when_Validation_fails_in_AspNet_Validator_controls.aspx

0 讨论(0)

不知归路

2020-11-28 07:45

<%@ 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>

0 讨论(0)