Solved

How Can I Validate in HTML?

Posted on 2003-10-22
15
203 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Why is this panel heading creating extra space 2 51
FIELDSETs and LEGENDs in email markup 1 24
Javascript to allow login/password authorization 4 45
Select case on click 3 16
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.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

803 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