Server side and client side validation possible

Question

in my requirement, i am require to use 1 editor and requiredfieldvalidator doesn't work on this Editor control. So i am validating this control through javascript and rest of the asp.net control through asp controls validator on a single click of a button.

I am trying to implement server side validation through aspnet server side control and client side validation through javascript. i have two textbox control and one submit button as follows :

<div>
        <asp:TextBox ID="Txt1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RfvTxt1" runat="server" ErrorMessage="*" ForeColor="Red"
            ControlToValidate="Txt1"></asp:RequiredFieldValidator>
        <asp:TextBox ID="Txt2" runat="server"></asp:TextBox>
        <asp:Button ID="btnsubmit" runat="server" OnClick="btnsubmit_Click" Text="Submit" 
        OnClientClick=" return ss();"  />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div> 



 <script src="JS/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ss() {
            var script = $("#<%=Txt2.ClientID %>").val();
            if (script == "") {
                alert(1);
                return false;
            }
        }
    </script>

 protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = "dd";
    }
    protected void btnsubmit_Click(object sender, EventArgs e)
    {
        Label1.Text = "ss";
    }

but both the validation doesn't work. problem is, when the second textbox contains the Text. The page postback and runs it event even if the first Textbox doesn't contain its text. Thanks for any assistance.

Answer 1

I am presenting the solution for your query. You have to just enable all server validation again in else condition of clientside validation function.

function ss() 
{
var script = $("#<%=Txt2.ClientID %>").val();
if (script == "") 
{
    alert(1);
    Page_ClientValidate();
    return false;
}
else 
{
    Page_ClientValidate();
}
}

OR

just change the button click as :

protected void btnsubmit_Click(object sender, EventArgs e) { if (Page.IsValid) { Label1.Text = "ss"; } }

Answer 2

Why not 2 RequiredFieldValidators, one for each TextBox?

<div>
        <asp:TextBox ID="Txt1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RfvTxt1" runat="server" ErrorMessage="*" ForeColor="Red"
            ControlToValidate="Txt1"></asp:RequiredFieldValidator>
        <asp:TextBox ID="Txt2" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RfvTxt2" runat="server" ErrorMessage="*" ForeColor="Red"
            ControlToValidate="Txt2"></asp:RequiredFieldValidator>
        <asp:Button ID="btnsubmit" runat="server" OnClick="btnsubmit_Click" Text="Submit" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>

Or, if you REALLY want to use custom validation, use CustomValidator . Here is example for both client and server side validation:

<div>
        <asp:TextBox ID="Txt1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RfvTxt1" runat="server" ErrorMessage="*" ForeColor="Red"
            ControlToValidate="Txt1"></asp:RequiredFieldValidator>
        <asp:TextBox ID="Txt2" runat="server"></asp:TextBox>
        <asp:CustomValidator id="CustomValidator1"
           ControlToValidate="Txt2"
           ClientValidationFunction="ClientValidate"
           OnServerValidate="ServerValidation"
           ErrorMessage="*"
           ForeColor="Red"
           runat="server"/>
        <asp:Button ID="btnsubmit" runat="server" OnClick="btnsubmit_Click" Text="Submit" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div> 

<script language="javascript"> 
   function ClientValidate(source, arguments)
   {
        if (arguments.Value == "" ){
            arguments.IsValid = true;
        } else {
            arguments.IsValid = false;
        }
   }
</script>

<script runat="server">
    void ServerValidation(object source, ServerValidateEventArgs args)
    {
      return !String.IsNullOrEmpty(args.Value);
    }
</script>

Answer 3

You may use ValidationGroup to tie your controls with you submit button and ensure that you use CauseValidation attribute on Button equal True

EDIT

document.getElementById('<%=txt2.ClientID%>').value;

try this may help