Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How Can I Validate in HTML?

Posted on 2003-10-22
15
Medium Priority
?
235 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

577 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