Javascript Validation - How do I check that the number entered into a form is between a certain range?

Question

I have this part of a html code:

<tr>
    <td id="examnumber">Examination number</td>
</tr>
<tr>
    <td><input type="text" name="examnumber"/></td>
</tr>

And I need the number entered to be 4 digits long and between the range 0000-9999. I have attempted to validate it by using this javascript code:

function validateForm() {
         var result = true;
         var msg="";


         if (document.ExamEntry.examnumber.value=="") {
           msg+="You must enter your examination number. \n";
           document.ExamEntry.examnumber.focus();
           document.getElementById('examnumber').style.color="red";
         } else if ((document.ExamEntry.examnumber.value.length < 0) ||       (document.ExamEntry.examnumber.value.length > 9999)) {
           msg+= "The examination number is not within the range 0000-9999.\n";
           result = false
         }

        if (document.ExamEntry.examnumber.value.length!=4) {
          msg+="Your examination number must be 4 digits long. \n";
          document.ExamEntry.examnumber.focus();
          document.getElementById('examnumber').style.color="red";
          result = false;
        }

However when I test the code by entering -900 or 3.45, it doesn't come up with an error message and says that the information has been entered correctly. I would very much appreciate it if someone could help me to fix this error.

Paul D. Waite · Accepted Answer · 2014-11-03 13:00:42Z

4

The main issue here is the field is named examnumber which you're trying to get it by going through the form name (Presumably ExamEntry). Getting a reference to the field in this way(document.Form_Name.Field_Name) is out-dated and only ever really worked on Internet Explorer.

A more generic way is using document.getElementById.

You are using this, in this line:

document.getElementById('examnumber').style.color="red";

But examnumber is the field name, not the Id. You should add an id to the field as well:

<td><input type="text" name="examnumber" id="examnumberfield"/></td>

This will enable you to use throughout:

var examnumberlabel = document.getElementById("examnumber");
var examnumberfield = document.getElementById("examnumberfield");
if (examnumberfield.value=="") {
       msg+="You must enter your examination number. \n";
       examnumberfield.focus();
       examnumberlabel .style.color="red";
//.. etc

(I suggest that a simple regex test on the value can both validate the length, and numeric status of the value - no need for separate tests.)

edited Nov 3, 2014 at 13:00

Paul D. Waite

99.5k57 gold badges204 silver badges275 bronze badges

answered Nov 3, 2014 at 12:45

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Naveen Chandra Tiwari Over a year ago

"examnumber" is also the id of <td>.

Paul D. Waite · Accepted Answer · 2014-11-03 13:01:27Z

2

/^\d{4}$/.test(document.ExamEntry.examnumber.value)

This Regexp will return true if it contains exactly 4 digits (0-9).

edited Nov 3, 2014 at 13:01

Paul D. Waite

99.5k57 gold badges204 silver badges275 bronze badges

answered Nov 3, 2014 at 12:45

nikodz

7275 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript Validation - How do I check that the number entered into a form is between a certain range?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related