Hi guys,

I am doing a validation form (3 inputs: number of apple, orange and banana). for example i type: 'a' as input in the form that required only number (apple), it will prompt me error then i type the next input orange: 2 and it will accept it, however when i type the 3rd input (banana) a number, it will prompt me error. i wonder what i do wrong.

Code blocks are created by indenting at least 4 spaces
... and can span multiple lines

if(document.getElementById("inputs").elements["apple"].value.search(/^\s*\d+\s*$/) == -1) {
    document.getElementById("inputs").elements["cost"].value = NaN;
    alert("You have entered "+ val + "\n Please enter a number");       
 }
 else{
    var vApple = document.getElementById("apple").value;
 }
 if(document.getElementById("inputs").elements["orange"].value.search(/^\s*\d+\s*$/) == -1) {
    document.getElementById("inputs").elements["cost"].value = NaN;
    alert("You have entered" + val + "Please enter a number");
 }
 else {
     var vOrange = document.getElementById("orange").value;
 }
 if(document.getElementById("inputs").elements["banana"].value.search(/^\s*\d+\s*$/) == -1) {
    document.getElementById("inputs").elements["cost"].value = NaN;
    alert("You have entered "+ val + "Please enter a number");
    //return false;
 }
 else {
     var vBanana = document.getElementById("banana").value;
 }

Thanks.

The code repeats, so why not do the repetitive bits in a loop - something like this :

var inputs = ["apple", "orange", "banana"];
var unitPrices = [0.75, 0.36, 0.99];//or similar
var price = 0;
var pattern = /^\s*\d+\s*$/;
for(i=0; i<inputs.length; i++){
    var qty = document.getElementById(inputs[i]).value;
    if(qty.search(pattern) == -1) {
        alert("You have entered " + qty + "Please enter a number");       
    }
    else {
        price += unitPrices[i] * qty;
    }
}
document.getElementById("cost").value = cost;

If at any stage in the loop, the input value is invalid, then cost will be set irrevocably to NaN. It will look after itself in this respect.

Airshow

Waaaaaa, where's the Edit button for this new editor?

document.getElementById("price").value = price;

I have used "price" on the basis that we're talking about the amount to be charged for the goods, not the amount they cost to acquire in the first place.

Hi Airshow,

Thanks for the reply. So there is no need for value NaN at the first place u mean?
Sorry for the late reply since busy coding php at the same time.

Hi Airshow,

Tried the suggestion codes however i did some changes since NaN does not appeear for invalid input.

if(qty.search(pattern) == -1) {
document.getElementById("cost").value = NaN;
alert("You have entered " + qty + "Please enter a number");
return false;
}

return false so that it does not keep on counting the total cost if there is an invalid input. Thanks.

Personally, I think it's friendlier not to overwrite an invalid entry (with NaN or anything else) because the user may have made a nearly valid entry but with say an error in just one character, eg. "1234T" when he meant "12345". If the whole entry was overwritten, then he would have to re-enter the whole number.

Airshow

Hi Airshow,

Oh i mean the NaN value only appear on the cost input box and not the user input. haha

Doh! My bad. I will try to put my brain in gear next time.

Airshow

you won't need to search for the correct input value, you could do this instead:

    ...
    var q = parseInt( qty );

    if( q != q )
    {    
        document.getElementById("cost").value = q;
        alert("You have entered " + qty + "Please enter a number");       
    }...

Hmm..mind explain what this code doees?thanks. because it seems it convert the regex into an int value?

because it seems it convert the regex into an int value

nope...,
and as I've said: you don't need neither search nor regex patterns to make sure that value provided is a number, because
"parseInt" takes care of that.

so in "qty" you have a string which may or may not represent a number;
we leave it that way since you'll be needing it for latter display in your alert;
it's why we further derive it and introduce the var "q";
so instead of asking for a "-1" match & result;
we simply check if "q" is "NaN";
and if it is, we store it in your "cost" element value as you require;
meanwhile we alert the original input string 'qty' to the user as you've planned;
telling him that what he fed in is not a number... etc;
and (of course that), in case it was a number - we continue to the next statement.

p.s.:

if(q!=q)
is my raw but explicit isNaN test.