c# - Javascript and Required field validator - Stack Overflow

admin管理员组

文章数量:1404576

I have a RequiredFieldValidator on a TextBox. This works fine when nothing is enterd in the TextBox. Now, one more validation I do is when the user enters some junk data, I throw an error-message saying "invalid entry". This is on the Label.

Now the scenario is after the error-message is thrown, if the user empties the textbox and clicks on the button, the RequiredFieldValidator works but the error-message on the label still remains as it is. I would like to hide/remove it once the user empties the textbox.

For this I used a JavaScript function but with this the RequiredFieldValidator does not work. Here's my code:

<asp:TextBox ID="txtemp" runat="server"></asp:TextBox>
<asp:Button ID="btnstatus" runat="server"  ValidationGroup="valgrp1" OnClientClick="Validate()"
    CausesValidation="true"  onclick="btnstatus_Click" 
    Text="Fetch status message" BackColor="#ccebff" />
&nbsp;
<asp:RequiredFieldValidator ID="Reqfield1" ControlToValidate="txtportalid"  ValidationGroup="valgrp1" ErrorMessage="wrong entry" runat="server" />
</div>
<div>
    <asp:Label ID="lblerrormsg" runat="server"  Font-Bold="true"  Visible="false" ForeColor="#FF3300">
    </asp:Label>
</div>

JavaScript:

function Validate()
{
    var txt1 = document.getElementById("<%= Txtemp.ClientID %>");
    var val1 = txt1.value.replace(/\s/g, "");

    if (val1=="")
    {
        document.getElementById("<%= lblerrormsg.ClientID%>").style.display = 'none';
    }
}

I have a RequiredFieldValidator on a TextBox. This works fine when nothing is enterd in the TextBox. Now, one more validation I do is when the user enters some junk data, I throw an error-message saying "invalid entry". This is on the Label.

Now the scenario is after the error-message is thrown, if the user empties the textbox and clicks on the button, the RequiredFieldValidator works but the error-message on the label still remains as it is. I would like to hide/remove it once the user empties the textbox.

For this I used a JavaScript function but with this the RequiredFieldValidator does not work. Here's my code:

<asp:TextBox ID="txtemp" runat="server"></asp:TextBox>
<asp:Button ID="btnstatus" runat="server"  ValidationGroup="valgrp1" OnClientClick="Validate()"
    CausesValidation="true"  onclick="btnstatus_Click" 
    Text="Fetch status message" BackColor="#ccebff" />
&nbsp;
<asp:RequiredFieldValidator ID="Reqfield1" ControlToValidate="txtportalid"  ValidationGroup="valgrp1" ErrorMessage="wrong entry" runat="server" />
</div>
<div>
    <asp:Label ID="lblerrormsg" runat="server"  Font-Bold="true"  Visible="false" ForeColor="#FF3300">
    </asp:Label>
</div>

JavaScript:

function Validate()
{
    var txt1 = document.getElementById("<%= Txtemp.ClientID %>");
    var val1 = txt1.value.replace(/\s/g, "");

    if (val1=="")
    {
        document.getElementById("<%= lblerrormsg.ClientID%>").style.display = 'none';
    }
}

• c#
• javascript
• asp

Share Improve this question Follow edited Jan 15, 2013 at 14:25 Abbas 14.4k66 gold badges4242 silver badges7575 bronze badges asked Jan 15, 2013 at 14:03 user11340user11340 111 gold badge11 silver badge33 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I'd suggest using CustomValidator with ClientValidationFunction property set to point to your Validate function like the following:

<script>
    function Validate(source, arguments) {
        arguments.IsValid = /* your validation logic */
    }
</script>

...

<asp:CustomValidator ControlToValidate="txtportalid" 
    ErrorMessage="..." ClientValidationFunction="Validate" runat="server" />

... or, in your case you can just use RegularExpressionValidator. Both will give you the behavior you're looking for.

You could handle the keyup event for the textbox using jQuery.

The example below does two things:

1. Everytime a keypress occurs on the textbox check whether the textbox is empty and
2. Check whether the error label has a value

If both the checks have passed, simply clear the error label!

ASPX:

<html xmlns="http://www.w3/1999/xhtml">
<head runat="server">
    <title>Home</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txtemp").keyup(function () {
                if (!this.value) {
                    var errorMessage = $("#<%= lblErrorMessage.ClientID %>").length;
                    if (errorMessage) {
                        $("#<%= lblErrorMessage.ClientID %>").html("");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtemp" runat="server" />
        <asp:Button ID="btnstatus" runat="server" ValidationGroup="valgrp1" CausesValidation="true"
            OnClick="btnstatus_Click" Text="Fetch status message" />
        <asp:RequiredFieldValidator runat="server" ID="req" ValidationGroup="valgrp1" ControlToValidate="txtemp"
            ErrorMessage="Field is required" />
        <asp:Label ID="lblErrorMessage" ClientIDMode="Static" runat="server" EnableViewState="false" />
    </div>
    </form>
</body>
</html>

Code behind (I've just created a simple method for testing) :

protected void btnstatus_Click(object sender, EventArgs e)
{
    if (txtemp.Text == "invalid")
    {
        lblErrorMessage.Text = "The data is invalid";
    }
}

本文标签： cJavascript and Required field validatorStack Overflow