onBlur Javascript Validation looking for NULL value...

 I have a javascript function that's currently working for some basic validation of the client.  It will return false for anything that's not a number, including blank spaces,  which is perfect.  However, it's ignoring null or empty values.  

Here's the function:

function validateNumber() {
    // Get the source element.
     var el = event.srcElement;
     // Valid numbers
     var num = "0123456789";
     event.returnValue = true;
     /* Loop over contents. If any character is not a number,
        set the return value to false. */
     for (var intLoop = 0;
        intLoop < el.value.length; intLoop++)
        if (-1 == num.indexOf(el.value.charAt(intLoop))) {
           event.returnValue=false;
           alert("You MUST enter a valid quantity in the box.")
        }
        if (!event.returnValue)       // Bad value
           el.className = "badValue"; // Change form element background class.
        else
         // Clear class to use default rendering.
         el.className="";
 }

I'm sure it's something simple I'm missing.  

Thanks in advance.

Joe Jenkins
LVL 5
Joe JenkinsAsked:
Who is Participating?
 
Cem TürkSenior Software EngineerCommented:
function validateNumber() {
    // Get the source element.
     var el = event.srcElement;
     // Valid numbers
     var num = "0123456789";
     event.returnValue = true;
if( el.value.length==0) { //if null is entered length will be 0
alert("You MUST enter a quantity in the box");
     event.returnValue=false;
}
     /* Loop over contents. If any character is not a number,
        set the return value to false. */
     for (var intLoop = 0;
        intLoop < el.value.length; intLoop++)
        if (-1 == num.indexOf(el.value.charAt(intLoop))) {
           event.returnValue=false;
           alert("You MUST enter a valid quantity in the box.")
        }
        if (!event.returnValue)       // Bad value
           el.className = "badValue"; // Change form element background class.
        else
         // Clear class to use default rendering.
         el.className="";
 }
0
 
Joe JenkinsAuthor Commented:
Absolutely perfect.  I knew it was something simple.  Saturday evening brain fart!  Here's the final script with your changes and some symantical changes to make more sense event order.

function validateNumber() {
    // Get the source element.
     var el = event.srcElement;
     // Valid numbers
     var num = "0123456789";
     event.returnValue = true;
if( el.value.length==0) { //if null is entered length will be 0
     event.returnValue=false;
}
     /* Loop over contents. If any character is not a number,
        set the return value to false. */
     for (var intLoop = 0;
        intLoop < el.value.length; intLoop++)
        if (-1 == num.indexOf(el.value.charAt(intLoop)))
           event.returnValue=false;
          if (!event.returnValue) {      // Bad value
              el.className = "badValue"; // Change class.
              alert("You MUST enter a value in the box \"0\" if NONE.");
              el.focus();
          }
            else
               // Clear class to use default rendering.
               el.className="";
}

With the way it's written now, chnages the background color of the element and returns focus to it so the user ABSOLUTELY knows where the issue is.  

Used in combination with:
ONKEYPRESS="if ((event.keyCode < 46) || (event.keyCode > 57) || (event.keyCode == 47)) event.returnValue = false;"

The user has no option but to put in a numeric value requiring an absolute number with every field.  

Thanks again Turk.

Points awarded.

Joe Jenkins
0
 
Cem TürkSenior Software EngineerCommented:
your welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.