How to do Client side validatation for the Form (on Content page ) with external javascript.js file ?

Question

0.00/5 (No votes)

See more:

I have do client side validation of form ( which is at my Content Page ) with three textboxes and one button ? And on my button onclientclick i called a Javascript function on .js file on my master page head tag but it is not working.

.Js File in my Script Folder :

         function validate() {
         var UserName = document.getElementById('<%= TextBox1.ClientID %>').value;
      var City = document.getElementById('<%= TextBox2.ClientID %>').value;
      var Designation = document.getElementById('<%= TextBox3.ClientID %>').value;
      if (UserName == "") {
         alert("Enter UserName");
         return false;
        }
        if (City == "") {
            alert("Enter City");
            return false;
        }

         if (Designation == "") {
            alert("Enter Designation");
            return false;
        }
    }


My Master Page header section:


     

      <head runat="server">
      <title></title>
      <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
      <script src="Scripts/formvalidation.js" type="text/javascript"></script>
    
      <asp:ContentPlaceHolder ID="HeadContent" runat="server">
      
      </head>
   



My Content Page section:
     
     

      <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"    CodeBehind="Gridview.aspx.cs" Inherits="InsertUpdaateDeleteGridview.Gridview" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
   

    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div>
    <table>
    <tr>
    <td>
    UserName </td><td> <asp:TextBox ID="TextBox1" runat="server"></td></tr>
    <tr><td>
    City</td><td><asp:TextBox ID="TextBox2" runat="server"></td></tr>
   <tr><td>
   Designation</td><td> <asp:TextBox ID="TextBox3" runat="server"></td></tr>
   <tr><td colspan="2"></td></tr>
   <tr>
   <td colspan="2" align="center">
   <asp:Button ID="Button1" runat="server" Text="save" OnClientClick="return validate();"     onclick="Button1_Click"  /></td></tr>
        <tr></tr></table></div>

Posted 24-Mar-14 1:07am

MurugappanCTS

Updated 24-Mar-14 1:24am

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Answer 1 · 2014-03-24T01:30:00

Solution 1

It is a common problem in calling controls from javascript/jquery in a master/content page setup.
The solution depends on a combination of factors like if the script is on the master page or content page, or is the control on master page or content page.
Check out this 2-part tutorial: Calling JavaScript from ASP.NET Master Page and Content Pages[^]

Posted 24-Mar-14 1:30am

Peter Leow

Updated 24-Mar-14 1:40am

v2

Comments

MurugappanCTS 24-Mar-14 7:36am

not working still

Peter Leow 24-Mar-14 7:40am

I have updated the solution.

Snesh Prajapati · Answer 2 · 2014-03-24T01:42:00

I modified following line:

<asp:button id="Button1" runat="server" text="save" onclientclick="return validate();" xmlns:asp="#unknown" />

i have deleted onclick="Button1_Click" and For testing purpose I dragged formvalidation.js file just below the div tag. Your validate() in formvalidation.js file is calling but since ID is getting change when page render. Now you need to check your JavaScript code.

XML

<asp:Button ID="Button1" runat="server" Text="save" OnClientClick="return validate();" /></td></tr>
        <tr></tr></table></div>
<script src="Scripts/formvalidation.js"></script>

Here is your modified js code:

C#

function validate() {

    var UserName = document.getElementById('MainContent_TextBox1').value;
    var City = document.getElementById('MainContent_TextBox2').value;
    var Designation = document.getElementById('MainContent_TextBox3').value;
    if (UserName == "") {
        alert("Enter UserName");
        return false;
    }
    if (City == "") {
        alert("Enter City");
        return false;
    }

    if (Designation == "") {
        alert("Enter Designation");
        return false;
    }
}