Java script validation

[drogba123]

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.

[Airshow]

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

[Airshow]

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

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

[Airshow]

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.

[drogba123]

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.

[drogba123]

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.

[Airshow]

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

[drogba123]

Hi Airshow,

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

[Airshow]

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

Airshow

[Troy III]

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");       
    }...

[drogba123]

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

[Troy III]

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.