Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How Can I Validate in HTML?

Posted on 2003-10-22
15
209 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

807 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