?
Solved

How Can I Validate in HTML?

Posted on 2003-10-22
15
Medium Priority
?
226 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
[X]
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
  • 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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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 learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

770 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