CODEWITHSUNDEEP
.netvalidationrequiredfieldvalidator
Dofs
Dofs

Reputation: 19207

RequiredFieldValidator and styling

Is it possible with the standard .Net field validators to change the style on the textfield, in which the error occures?

If I e.g. have a field phonenumber which needs to be filled out, it should create a red border around the textfield on submit, if the field is not filled.

Hopefully this can be done with the standard controls so I don't need to recode it using e.g. jQuery Validation plugin etc.

-Dofs

Upvotes: 0

Views: 3150

Answers (2)

Fábio
Fábio

Reputation: 115

You can do this with a native components from ASP.Net:

In your ASP page:

<asp:TextBox ID="TextBox1" runat="server"/>

<asp:CustomValidator ID="CustomValidator1" runat="server" OnServerValidate="ValidateTextBox1"   ForeColor="Red" SetFocusOnError="true"></asp:CustomValidator>

In the code behind:

    protected void ValidateTextBox1(object source, ServerValidateEventArgs args) 
            {
                if (TextBox1.Text == string.Empty)
                {
                    args.IsValid = false;
                    TextBox1.Style.Add("border", "solid 1px red");
                    CustomValidator1.Text = "required";
                }
                else
                    args.IsValid = true;

            }

PS.: On press button, the RequiredFieldValidator is activated before the CustomValidator. If there are any on the same page, you have to turn it off or replace it with CustomValidator.

OR

You can do with a CSS and Javascript.

CSS Class:

<style type="text/css">
    body
    {
        font-family:Arial;
        font-size:10pt;
    }
    .ErrorControl
    {
        background-color: #FBE3E4;
        border: solid 1px Red;
    }
</style>

JavaScript function:

<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 = "ErrorControl";
            } else {
                control.className = "";
            }
        } catch (e) { }
    }
    return false;
 }
 return true;
}
</script>

Now, the validators ASP.net:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1"
    runat="server" ErrorMessage="Required"></asp:RequiredFieldValidator>

OR

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Required"
    ControlToValidate="TextBox2" ValidateEmptyText="true" ClientValidationFunction="Validate"></asp:CustomValidator>
<script type="text/javascript">
    function Validate(sender, args) {
        if (document.getElementById(sender.controltovalidate).value != "") {
            args.IsValid = true;
        } else {
            args.IsValid = false;
        }
    }
</script>

Upvotes: 1

Klaus Byskov Pedersen
Klaus Byskov Pedersen

Reputation: 120937

You can do it by using the ajax toolkit, as explained by Lance Zhang on this page.

Upvotes: 0

Related Questions