VALIDATION ON FORM WITH JAVASCRIPT(BOX DISPLAY)

HOW TO PERFORM VALIDATION THROUGH JAVA-SCRIPT

THE CODE DESIGN PAGE:


we will design some text boxes for user entry and validate the entry using JavaScript.
simple example :

<h3>Feedback</h3> 

        <div class="labels"> 

         <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>

        </div> 

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

        <div class="labels"> 

        <asp:Label ID="lblEmail" runat="server" Text="E-mail"></asp:Label>

        </div>

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

        <div class="labels"> 

        <asp:Label ID="lblCategory" runat="server" Text="Category"></asp:Label>

        </div>

            <asp:DropDownList ID="ddUserCat" runat="server">

            <asp:ListItem Value="BUGS"> Bugs </asp:ListItem>

                  <asp:ListItem Value="UI"> User Interface </asp:ListItem>

                  <asp:ListItem Value="DI"> Data Inconsistency</asp:ListItem>

                  <asp:ListItem Value="OT"> Others</asp:ListItem>

            </asp:DropDownList>

          <div class="labels"> 

          <asp:Label ID="lblSubject" runat="server" Text="Subject"></asp:Label>

          </div>  

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

        <div class="labels"> 

        <asp:Label ID="lblFeedback" runat="server" Text="Feedback"></asp:Label>

        </div> 

        <asp:TextBox id="txtFeedback" TextMode="multiline" runat="server" Width="316px"></asp:TextBox>

                                    <br />

                                    <br />

                                   

        <p><asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />

        </p>

This is the simple feedback form used for getting the valuable feedback from user about the Web-page

.Now to validate the inputs and show them in box all at once we need to write a javascript and call it on button click:

<script language="javascript" type="text/jscript">  

    function Submit(btn,frm)

    {

     var message = "";

  

    if(frm.elements['<%=txtName.UniqueID %>'].value=='')

        message = message + ">>  Name cannot be blank. \n\n";

   

     if(frm.elements['<%=txtEmail.UniqueID %>'].value=='')

        message = message + ">> Email cannot be blank. \n\n";

    var x = frm.elements['<%=txtEmail.UniqueID %>'].value;

    var atpos = x.indexOf("@");

    var dotpos = x.lastIndexOf(".");

    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length)

     {

        message = message + ">> Not a valid e-mail address \n\n";

      

      

    }

    if (frm.elements['<%=ddUserCat.UniqueID %>'].value == '')

        message = message + ">> Select one Category \n\n";

    if (frm.elements['<%=txtSubject.UniqueID %>'].value == '')

        message = message + ">> Select Subject \n\n";

    if (frm.elements['<%=txtFeedback.UniqueID %>'].value == '')

        message = message + ">> Type Feedback \n\n";

     if (message !='')

     {

        alert(message);

        return 0;

     }

     else

     {

    

       return 1;

     }

   

    }

   

    </script>

Now AT last we will call the javascript on button click:

protected void Page_Load(object sender, EventArgs e)

    {

        this.SmartNavigation = true;

        btnSubmit.Attributes.Add("onClick", "javascript:if(Submit(this,this.form)==0){return false;}");

       

    }