Solved

ASP.NET - Javascript to validate text boxes

Posted on 2012-03-21
10
259 Views
Last Modified: 2012-04-12
I have an ASP.NET app using masterpages - I've attached a sample of the code.  I tried using the Validate controls with .NET but don't like how they are working so I want to implement javascript to perform the validations.

1.  Need to ensure that no text boxes are empty
2.  NewPassword and ConfirmPassword match
3.  OldPassword matches OrigPassword (I also have this in a session).

Any ideas?
ASPX-Page---Need-javascript-to-v.txt
0
Comment
Question by:CipherIS
  • 5
  • 5
10 Comments
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37748675
CASE 1 : make sure that no textbox should be empty .
CASE 2 :  NewPassword and ConfirmPassword match

you can try this

$(".submitButton").click(function() {
  var isValid = true;
$.each($("input[type=text]"),function() {
     if($(this).val() == "")
    {
     alert("No text box can be empty");
     $(this).focus();
     isValid =false;
    }
    if(!isValid ) return false;
});
 if(isValid)
 {
    if($("#txtNewPwd").val() != $("#txtConfirmPwd").val())
    {
           alert("New Password and Confirm Password must match.");
           isValid = false;
    }
 }
  return isValid
});



CASE 3 :  OldPassword matches OrigPassword (I also have this in a session).

For this,you have to make an jQuery ajax call to ther server to validate by comparing the oldpassword from the password stored in the session,as session will not be accessible to the client code (i.e jquery),So you have to go to the server by doing asynchronus call i.e Ajax call.
0
 
LVL 1

Author Comment

by:CipherIS
ID: 37748823
Code is not working.  I receive $ is not defined.

<script type="text/javascript">

$(".submitButton").click(function() {
  var isValid = true;
$.each($("input[type=text]"),function() {
     if($(this).val() == "")
    {
     alert("No text box can be empty");
     $(this).focus();
     isValid =false;
    }
    if(!isValid ) return false;
});
 if(isValid)
 {
    if($("#txtNewPwd").val() != $("#txtConfirmPwd").val())
    {
           alert("New Password and Confirm Password must match.");
           isValid = false;
    }
 }
  return isValid
});

</script>
0
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37749027
you need to add the Jquery reference on the head section of your page. Just add the line

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

in the head section of the page.

OR
you can also get the local copy of jquery from the jquery.com site.

Both of them will work.
0
ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

 
LVL 1

Author Comment

by:CipherIS
ID: 37752734
so basically this is the solution?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

$(".submitButton").click(function() {
  var isValid = true;
$.each($("input[type=text]"),function() {
     if($(this).val() == "")
    {
     alert("No text box can be empty");
     $(this).focus();
     isValid =false;
    }
    if(!isValid ) return false;
});
 if(isValid)
 {
    if($("#txtNewPwd").val() != $("#txtConfirmPwd").val())
    {
           alert("New Password and Confirm Password must match.");
           isValid = false;
    }
 }
  return isValid
});

</script>
0
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37753027
Yes.This will help you to achieve what you want.Keep the Script to the head section of your page.If any issue persists then share that.
0
 
LVL 1

Author Comment

by:CipherIS
ID: 37753705
I'm using master pages - I can't put it in the head section of my page as the page does not have a head section.

Please look at the document that I attached with my posting.
0
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37753746
Ok  you can place  the following line (script> in the Head section of your Master Page. It will have no issue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
0
 
LVL 1

Author Comment

by:CipherIS
ID: 37753759
and the script to validate?  put that in my page?
0
 
LVL 7

Accepted Solution

by:
Lalit Chandra earned 500 total points
ID: 37753794
yes,in your page (content page),
place the following line anywhere in your page.

<script Language="Javascript">
    $(function() {

$(".submitButton").click(function() {
  var isValid = true;
$.each($("input[type=text]"),function() {
     if($(this).val() == "")
    {
     alert("No text box can be empty");
     $(this).focus();
     isValid =false;
    }
    if(!isValid ) return false;
});
 if(isValid)
 {
    if($("#txtNewPwd").val() != $("#txtConfirmPwd").val())
    {
           alert("New Password and Confirm Password must match.");
           isValid = false;
    }
 }
  return isValid
});


    });
</script>

Hope Now it will fix up your problem.
0
 
LVL 1

Author Comment

by:CipherIS
ID: 37813552
will test soon - been tied up
0

Featured Post

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question