javascript validate number not detecting empty form fields

Question

I am working on a project for school. The code I am using is straight from our lab manual but my instructor is out of town for the weekend. The concept is to manipulate data using JavaScript. I am having a problem with the validation portion, specifically with empty field number validation. When either the Maximum Attendees or Phone Number field are left blank in the form an error should appear. It functions properly for alpha characters, but not null fields. I am assuming that as these fields are using HTML5 number types the for loop is considering the null value 0. Am I on the right track?

<!DOCTYPE HTML>

<html>
<head>
<title>Event Scheduler</title>
<script language="JavaScript" type="text/javascript">
<!--

function ScheduledEvent(evtDate, evtTitle, maxattendees, evtCoordinator, 
                        phonenum, email, infourl) {

    this.evtDate = evtDate;
    this.evtTitle = evtTitle;
    this.maxattendees = maxattendees;
    this.evtCoordinator = evtCoordinator;
    this.phonenum = phonenum;
    this.email = email;
    this.infourl = infourl;
    this.PrintEvent = PrintEvent;
}

function PrintEvent(){
    document.write("<p>You have scheduled an event named " + 
                   this.evtTitle);
    document.write(" that will occur on " + this.evtDate + 
                   " and allow up to " + this.maxattendees + " attendees. ");
    document.write("The event is coordinated by " + 
                   this.evtCoordinator + " who can be reached at " + this.phonenum);
    document.write(" or by email at " + this.email + ".  ");
    document.write("More information about the event is available at" + 
                   " <a href='" + this.infourl + "'> " + this.infourl + "</a></p>");
}

function IsNumeric(sNumber){
    var numberChars = "0123456789.";
    var IsNumber = true;
    var currentChar;

    //loop through the characters to ensure that each is a character
    //that would be included in a positive number
    for (i = 0; i < sNumber.length && IsNumber == true; i++)
    {
        currentChar = sNumber.charAt(i);
        if (numberChars.indexOf(currentChar) == -1)
        {
            IsNumber = false;
        }
    }
    return IsNumber;
} 

function Validate(){
    with (document.evtForm) {

        evt = new ScheduledEvent(evtDate.value, evtTitle.value,
                                 maxattendees.value, evtCoordinator.value, phonenum.value,
                                 email.value, infourl.value);
    }

    with (evt)
    {
        if(evtDate.length<1)
        {
            alert("You must enter a date.");
            return false;
        }
        if(evtCoordinator.length<5)
        {
            alert("The coordinator name must be at least five characters long.");
            return false;
        }
        if(evtTitle.length<1)
        {
            alert("The title mut be at least one character long.");
            return false;
        }   
        if(!IsNumeric(maxattendees))
        {
            alert("The maximum number of attendees must be a number.");
            return false;
        }
        if(!IsNumeric(phonenum))
        {
            alert("The phone number must be a number.");
            return false;
        }
        evt.PrintEvent();
    }
    return true;
}

//-->
</script>
</head>
<body>
<form name= "evtForm" method="post" onsubmit="Validate()">
<table>
<tr>
<td>
Event Date: </td><td><input type=date id="evtDate" /></td>
</tr>
<tr><td>Title:</td><td><input id="evtTitle" /></td></tr>
<tr><td>Maximum attendees:</td><td><input type=number id="maxattendees" />
</td></tr>
<tr><td>Event Coordinator: </td><td><input id="evtCoordinator" /></td></tr>
<tr><td>Phone number (numbers only): </td><td><input type=tel id="phonenum" />
</td></tr>
<tr><td>Email: </td><td><input type=email id="email" /></td></tr>
<tr><td>More info: </td><td><input type=url id="infourl" /></td></tr>
</table>
<input type=submit value="Submit" />

</form>

</body>
</html>

Pointy · Accepted Answer · 2015-04-03 22:05:34Z

3

Well if the length of the value string is 0, the test in the loop won't be evaluated and the function will return the initial value of IsNumber - true. (When an <input> is empty the value is the empty string (""), not null.)

At the top of that function add

if (!sNumber.length) return false;

If the length is zero, that'll cause the function to return false.

If you felt like getting fancy you could do the whole test with a regex:

function IsNumeric(sNumber) {
  return /^\d+$/.test(sNumber);
}

(That, like your existing loop, doesn't allow for decimal fractions.)

answered Apr 3, 2015 at 22:05

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

Collectives™ on Stack Overflow

javascript validate number not detecting empty form fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related