Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Validate text befroe submit? 4

Status
Not open for further replies.
markdmac

markdmac

MIS
Dec 20, 2003
12,340
US
Hi everyone,

I have created a web page to grab an employeeID number. The employee numbers can have one of two formats:

1. 7 characters and start with an Alpha for permanent employees.
2. 6 characters and be numeric if a contractor

I'd like to know if there is a way in classic ASP to validate that the input meets either of these two patterns before submitting information to the page that will take action on it. It was suggested in the ASP forum that javascript is the only way to do it. I'm a VBScript guy and lost with JavaScript.

Can anyone offer any suggestions?

Currently my input box looks like this:

<INPUT TYPE="text" NAME="EmpID" VALUE='' size="20" color="white"></INPUT>

Any help is greatly appreciated.
 
Sort by date Sort by votes
I'm not 100% sure of your requirements based on what you posted, but I'm guessing that you want to validate for 0 or 1 alphabetic characters followed by 6 numeric characters. If that is not correct please let me know. Otherwise, this regexp should work out fine for you:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>title test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function validateForm(frm) {
   var empid = frm.elements["EmpID"].value;
   //check to make sure they did type something in the textbox
   if (empid.length) {
      //check pattern of string for 0 or 1 alphabetic characters followed by exactly 6 numeric characters
      if (!/^[A-Za-z]?\d{6}$/.test(empid)) {
         alert("You must supply a valid Employee ID - 0 or 1 alphabetic characters followed by exactly 6 numeric characters");
         return false;
      }
   }
   //tell them they did not fill out the employee id field
   else {
      alert("You must supply an Employee ID");
      return false;
   }
   return true;
}

</script>
<style type="text/css"></style>
</head>
<body>

<form id="theForm" action="" method="post" onsubmit="return validateForm(this)">
   <input type="text" name="EmpID" />
   <input type="submit" value="submit form" />
</form>

</body>
</html>

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
Many thanks for your reply Kaht!

I'm terrible with RegEx or I would tweak this myself.

What I need to do is first validate the number of characters input, it needs to be 6 or 7 characters. If 6 characters they should all be numbers. If 7 then the first needs to be an alpha and the rest can be alpha or number.

If less than 6 or more than 7 characters I need to have it fail. If the above rules are not met it needs to fail.

Ideally what I am looking to do is validate the information before the user submits the data, is that possible with javascript? Is there an OnExit event like there is an OnClick that I could use to execute the function you provided?


I hope you find this post helpful.

Regards,

Mark

Check out my scripting solutions at
 
Upvote 0 Downvote
I saw that post in the ASP forum markdmac. You can use RegEx's in VBScript. I believe they are pretty much the same syntax too (the patterns). Kaht gave you a good template to check for your instances. Just convert that code to VB ASP and you should have no problem.

[small]"Mom........MEATLOAF!!!! DANG!!!![/small]
<.
 
Upvote 0 Downvote
My trouble seems to be understandign how I can use the OnChange event to fire this function check. I do not want to submit information yet, just test the value entered.

Whether VBScript of JavaScript, I stink at Regular Expressions but I guess this is an opportunity to try to learn them better. Regretfully I am in a time cruch which has me acting like a spoonie wanting to be just fed information.

I've got my code doing all the actual work that it needs to, now I need to make it account for various user errors. Thanks to you both.

Mark
 
Upvote 0 Downvote
There's no need to check for field validation when the value is changed, just do all validation checks when the form is submitted. That is the most common routine on the internet anyway. Here's a modified regexp to allow 1 alpha character followed by 6 alphanumeric characters. I originally thought the 6 characters following the alpha character had to be numeric. You'll probably want to change the error message to reflect the proper validation:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>title test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function validateForm(frm) {
   var empid = frm.elements["EmpID"].value;
   //check to make sure they did type something in the textbox
   if (empid.length) {
      //check pattern of string for 0 or 1 alphabetic characters followed by exactly 6 numeric characters
      if (![!]/^([A-Za-z]?[A-Za-z0-9]{6})$|^\d{6}$/[/!].test(empid)) {
         alert("You must supply a valid Employee ID - 0 or 1 alphabetic characters followed by exactly 6 numeric characters");
         return false;
      }
   }
   //tell them they did not fill out the employee id field
   else {
      alert("You must supply an Employee ID");
      return false;
   }
   return true;
}

</script>
<style type="text/css"></style>
</head>
<body>

<form id="theForm" action="" method="post" onsubmit="[!]return validateForm(this)[/!]">
   <input type="text" name="EmpID" />
   <input type="submit" value="submit form" />
</form>

</body>
</html>

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
Thanks again Kaht.

Forgive me for being so dense. I've had to step back to coding in classic ASP and it has been a while since I did that. I think this might be easier in ASP.Net.

What is throwing me is the fact that you are changing the actions for the form submit button. I currently have that go to another page and pass a lot of variables. If I make the change you have provided how would I then continue with processing my data?

I admit I am unsure of what should be the right solution but I thought I would need to validate my text before submitting to my next page. Is that possible or is there a way to modify the function provided to pass all my vaiables on to the next page?

I hope you find this post helpful.

Regards,

Mark

Check out my scripting solutions at
 
Upvote 0 Downvote
If false is returned on the onsubmit handler, the form does not get submitted.

That's why Kaht has [!]return[/!] validateForm(this)

[small]"Mom........MEATLOAF!!!! DANG!!!![/small]
<.
 
Upvote 0 Downvote
Monksnake is correct. When the form is submitted the onsubmit handler is invoked. This calls a function that returns a value - true or false. In the onsubmit handler declaration we return that returned value:
Code: 
 onsubmit="[!]return[/!] validateForm(this)"

If false is returned the form cancels the submission and control is returned to the user for the page. If true is returned the page is submitted to the page declared in the action parameter of the form. If no action is declared, the page submits data to itself by default.

If you remove the [!]return[/!] shown above in the onsubmit declaration, the page will submit no matter what the function returns.

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
That helps me understand this a lot more thank you so much. I now have it working with the RegEx example given. Now I just need to figure out how to tweak it.

Thank you again! And thanks for bearing with my denseness. I was really trying to eliminate my preconceived notions on what the solution would be. Not understanding the onsubmit handle was why I was having a hard time with understanding this solution which is positively elegant.
 
Upvote 0 Downvote
[thumbsup2]

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
One more time to bug you Kaht and monksnake. In vbscript I would do something like this:

Code: 
Select Case Len(EmpID)
    Case 6 'EmpID has only 6 character, make sure all are numbers
         Run regex comparrison that all characters are numbers
    Case 7 'Emp has 7 characters, make sure first is Alpha
         Run regex comparrison for first character of Alpha
End Select

I think I have figured out the needed RegEx strings:
(!/^([0-9]?[0-9]{5})$|^\d{6}$/.test(empid))
(!/^([A-Za-z]?[A-Za-z0-9]{6})$|^\d{6}$/.test(empid))

Did I get this right? I don't know Java well enough to save my life. Is there a way to turn my pseudo code for checking the variable length first and then taking action?

Or is there a way to write a single regular expression to do this?



I hope you find this post helpful.

Regards,

Mark

Check out my scripting solutions at
 
Upvote 0 Downvote
Here's a quick breakdown of some regex syntax you'll need to know to decode the regex:
Code: 
^   = start of string
$   = end of string
?   = 0 or 1 of preceding character
|   = or
\d  = numeric character 0-9
[]  = any of enclosed characters, so [A-Z] means any letter A-Z
{x} = match exactly x of prededing characters

By the way, monksnake pointed out one thing wrong with the regex that I will outline below:

So, we can break the regex into 2 parts:

Code: 
/[blue]^([A-Za-z]{1}[A-Za-z0-9]{6})$[/blue]|[red]^\d{6}$[/red]/

The red first, since it's smaller:

Code: 
^ - start of string
\d - any numeric character
{6} - exactly 6 of the previous character (which was \d)
$ - end of string

The part between the red and blue:
Code: 
| - or operator, causes the regexp to match either the red or the blue

And the blue portion:
Code: 
^ - start of string
[A-Za-z] - any alphabetic character
{1} - exactly one of the preceding character (which was any alpha character)
[small](this is the part monksnake pointed out that was wrong - I had originally had the ? character that means 0 or 1 of the preceding character - this was leftover from my first reply and should have been changed)[/small]
[A-Za-z0-9] - any alphanumeric character
{6} - exactly 6 of the preceding character (which was alphanumeric)
$ - end of string

If you're using the regexp provided you shouldn't need to do the case statement since the regexp will check for the correct length anyway.

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
Glad to help, thanks for the stars [smile]

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
Me again! As stated earlier the function provided is working great. I am now looking to re-use the code a bit on the same page. I have created a new function to check phone number entries:

Code: 
function validatePhone(frm) {
   var empid = frm.elements["phone"].value;
   //check to make sure they did type something in the textbox
   if (phone.length) {
      //check pattern for 3 digit area code followed by seven digit phone number.
      if (!/^([0-9]{3}-[0-9]{3}-[0-9]{4})$/.test(phone))  {
         alert("You must supply a valid phone number");
         return false;
      }
   }
   return true;
}

What I need is to check that the format is ###-###-####. Did I get that correct in my test string?

I have intentionally removed the else section because they are allowed to leave this blank, I just need to make it faiol if they enter a bad number.

Now for the hard part (for me because I don't understand java). I want to have the same function test numbers for: phone, fax, pager, cell and home number. Is there a way to do that? Right now the function is hard coded for phone.

As always help is greatly appreciated.
 
Upvote 0 Downvote
Code: 
function validatePhone(frm) {
   var empid = frm.elements["phone"].value;
   //check to make sure they did type something in the textbox
   if (phone.length) {
      //check pattern for 3 digit area code followed by seven digit phone number.
      if (!/^([0-9]{3}-[0-9]{3}-[0-9]{4})$/.test(phone))  {
         alert("You must supply a valid phone number");
         return false;
      }
   }
   return true;
}


The first thing I see is if someone doesn't type in anything for a phone number, that will not be caught.

The only way I can think of to test the other numbers is to just put multiple if statements with .test.



[monkey][snake] <.
 
Upvote 0 Downvote
Ugh, it broke the validation. here is the entire function. Can anybody see anything wrong?

Code: 
<script type="text/javascript">

function validateForm(frm) {
   var empid = frm.elements["EmpID"].value;
   var phone = frm.elements["phone"].value;
   var fax = frm.elements["fax"].value;
   var pager = frm.elements["pager"].value;
   var home = frm.elements["home"].value;
   var mobile = frm.elements["mobile"].value;
   //check to make sure they did type something in the textbox
   if (empid.length) {
      //check pattern of string for 0 or 1 alphabetic characters followed by exactly 6 numeric characters
      if (!/^([A-Za-z]{1}[A-Za-z0-9]{7})$|^\d{6}$/.test(empid))  {
         alert("You must supply a valid Employee ID");
         return false;
      }
   }
   //tell them they did not fill out the employee id field
   else {
      alert("You must supply an Employee ID");
      return false;
   }
   
   //check to make sure they did type something in the textbox
   if (phone.length) {
      //check pattern for 3 digit area code followed by seven digit phone number.
      if (!/^([0-9]{3}-[0-9]{3}-[0-9]{4})$/.test(phone))  {
         alert("You must supply a valid phone number");
         return false;
      }
   }
   if (fax.length) {
      //check pattern for 3 digit area code followed by seven digit phone number.
      if (!/^([0-9]{3}-[0-9]{3}-[0-9]{4})$/.test(fax))  {
         alert("You must supply a valid fax number");
         return false;
      }
   }
   if (pager.length) {
      //check pattern for 3 digit area code followed by seven digit phone number.
      if (!/^([0-9]{3}-[0-9]{3}-[0-9]{4})$/.test(pager))  {
         alert("You must supply a valid pager number");
         return false;
      }
   }
   if (mobile.length) {
      //check pattern for 3 digit area code followed by seven digit phone number.
      if (!/^([0-9]{3}-[0-9]{3}-[0-9]{4})$/.test(mobile))  {
         alert("You must supply a valid mobile number");
         return false;
      }
   }
   if (home.length) {
      //check pattern for 3 digit area code followed by seven digit phone number.
      if (!/^([0-9]{3}-[0-9]{3}-[0-9]{4})$/.test(home))  {
         alert("You must supply a valid home phone number");
         return false;
      }
   }
   return true;
}


</script>

I hope you find this post helpful.

Regards,

Mark

Check out my scripting solutions at
 
Upvote 0 Downvote
Mark, the function looks like it should run fine. Where is the code breaking?

On a side note, you can cut down the phone regex. Change this:
Code: 
/^([0-9]{3}-[0-9]{3}-[0-9]{4})$/
to this:
Code: 
/^([!]\d[/!]{3}-[!]\d[/!]{3}-[!]\d[/!]{4})$/

[0-9] is functionally the same as \d. That is not to say that [0-9] is not useful - I use it often when I need to check for an alphanumeric character [A-Za-z0-9], but when I need to only check for a number, I usually use \d

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
170
Samthyr
Samthyr
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
waubain
  • Locked
  • Question
Send array data to text file on click of button 1
Replies
2
Views
143
waubain
waubain
waubain
  • Locked
  • Question
Find max value of element in array located in text file 1
Replies
2
Views
135
waubain
waubain
Pudsters
  • Locked
  • Question
Populate text box based on other textbox 1
Replies
2
Views
213
Pudsters
Pudsters

Part and Inventory Search

Sponsor

Back
Top