Solved

How Can I Validate in HTML?

Posted on 2003-10-22
15
195 Views
Last Modified: 2010-04-09
Hi,

I've been away from HTML for awhile. I'd like to know if it is possible to validate text entered into a textbox on a form.

What I would like to do is to check to see if the user is entering the correct character string, say, 32p or 32P (or 33p or 33P). If the user enters the wrong string by mistake, I would like to pop up a messagebox, play a short sound and return and maintain focus on the textbox.

How involved is this?

Jim
0
Comment
Question by:jnowlin
  • 10
  • 5
15 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 9600432
what are the possible valid strings?  do they all match a certain patern, or is there a specific subset?

If a subset, then do this:

<SCRIPT language="javascript">
  function validate(theForm)
  {
      if (  theForm.myText.value == "32p"
         || theForm.myText.value == "32P"
         || theForm.myText.value == "33p"
         || theForm.myText.value == "33P" )
      {
         return true;
      }
      else
      {
          alert("please enter a valid value");
          theForm.mytext.focus();
          return false;
      }
  }
</SCRIPT>

<FORM name="myform"  onsubmit="return validate(this);">
<INPUT type="text" name="myText" />
</FORM>

0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9600485
If the pattern is always, ##P then you can do the function this way:

  function validate(theForm)
  {
      if (  theForm.myText.value.toUpperCase() == theForm.myText.value.toUpperCase().match(/\d\dP/) )
      {
         return true;
      }
      else
      {
          alert("please enter a valid value");
          theForm.mytext.focus();
          return false;
      }
  }
0
 

Author Comment

by:jnowlin
ID: 9600705
Actually, if I was told correctly as to what they want,
it should always be

nc
or
nnc
or
nnnc
where n is a number and c is a character, as in,

3H
32P
33P
125I
or, as some of these strings are as follows:
51Cr

where entering  52Cr or 51Cd is incorrect.

0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9600897
ok, so try this pattern:

if (  theForm.myText.value.toUpperCase() == theForm.myText.value.toUpperCase().match(/\d+[a-zA-Z]/) )
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9600914
or better:

if (  theForm.myText.value.toUpperCase() == theForm.myText.value.toUpperCase().match(/\d{1,3}[a-zA-Z]/) )
0
 

Author Comment

by:jnowlin
ID: 9606965
I'll give it a try. Thanks.
0
 

Author Comment

by:jnowlin
ID: 9608546
That works good.

Is there any way in JavaScript to handle an event? I would like the validation to occur as soon as the user tabs into the next textbox or mouse clicks into the textbox. I am unfamiliar with JavaScripts event handlers.

Also, in addition to the alert messagebox, can JS be written to play a short sound file?

JN
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 33

Expert Comment

by:knightEknight
ID: 9611130
sure ... do this:

<INPUT type="text" name="myText" onchange="validate(this.form);" />

However, I would still also include it in the onsubmit handler of the form tag (as previously shown).
0
 

Author Comment

by:jnowlin
ID: 9613744
OK, I'm a bonehead....

<CENTER><FORM name="myform"  onsubmit="return validate(this);"

onchange="validate(this.form);"/>

Do I include the onchange handler as I've written above? As it is above, it doesn't work.

I'll pick up the latest JavaScript book!

JimNowlin
0
 

Author Comment

by:jnowlin
ID: 9613818
Also, I noticed that when I type in 33P or 3H or 125I,
the alert box does not pop up.

When I type in 51Cr, which is a valid abbreviation for our needs, the alert messagebox incorrectly pops up.

How does
match(/\d+[a-zA-Z]/) )
that expression work?

Would this work:

match(/\d+[a-zA-Z]+[a-z]A-Z/) )
to catch the second letter,
?

Jim
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9615668
see my example ... the onchange is in the INPUT tag, not the FORM tag.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9615698
ah, I didn't see that about the second character.  Is it always a lower-case "r"?

If so, then try this:

if (  theForm.myText.value.toUpperCase() == theForm.myText.value.toUpperCase().match(/\d{1,3}[a-zA-Z]r?/) )
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9615712
oops, because of the toUpperCase() method I use, using the lower-r in the expression will have no effect.  Try making it R? instead of r? .
0
 
LVL 33

Accepted Solution

by:
knightEknight earned 400 total points
ID: 9615726
no, no, no ... better yet, let's just remove the toUpperCase() method:

   if (  theForm.myText.value == theForm.myText.value.match(/\d{1,3}[a-zA-Z]r?/) )

it is not necessary to convert the whole string to upper since we are testing both the upper and lower alpha range with [a-zA-Z] .
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9615738
... as previously noted, the onchange is in the INPUT tag, not the FORM tag.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

920 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now