How to validate input using javascript

Question

<script type="text/javascript">
function validate() {
    if (document.form.price.value.trim() === "") {
        alert("Please enter a price");
        document.form.price.focus();
        return false;
    }
    if (document.form.price.value !== "") {
        if (! (/^\d*(?:\.\d{0,2})?$/.test(document.form.price.value))) {
            alert("Please enter a valid price");
            document.form.price.focus();
            return false;
        }
    }
    return true;
}
</script>

<form action="" method="post" name="form" id="form" onsubmit="return validate(this);">

<input name="price"  type="text" class="r2" />
<input name="price2" type="text" class="r2" />
<input name="price3" type="text" class="r2" />
<input name="price4" type="text" class="r2" />
<input name="price5" type="text" class="r2" />
...more....
<input name="price50" type="text" class="r2" />

Current javascript code working fine to validate the name="price".

Question : How to make the code will working as global validation? Example can validate the price, price2, price3, price4, price5 etc.. with a single function. Let me know :)

Answer 1

You can validate all 5 prices and return true only if all 5 match your validation rules.

Answer 2

My personal recommendation would be something like this:

<script type="text/javascript">
function validate() {
    if (validatePrice(document.form.price) && 
        validatePrice(document.form.price2) && 
        validatePrice(document.form.price3) && 
        validatePrice(document.form.price4) && 
        validatePrice(document.form.price5))
       return true;
    else
       return false;
}

function validatePrice(price)
{
    if (price.value.trim() === "") {
        alert("Please enter a price");
        price.focus();
        return false;
    }
    if (price.value !== "") {
        if (! (/^\d*(?:\.\d{0,2})?$/.test(price.value))) {
            alert("Please enter a valid price");
            price.focus();
            return false;
        }
    }
    return true;       
}
</script>

Answer 3

The easiest in this case is really to use jQuery. This way you can use a generic selector and apply the validation on all items.

$("#price*").each(function() {//Do your validation here $(this) is the item price, then price2 then price3})

For anything else you would need to query the DOM and then that doesn't work the same in all browsers.

Today, you can't really do anything in Javascript and ignore something like jQuery http://docs.jquery.com/ or Scriptalicious.

Answer 4

If you do not plan on using jQuery this should work.

function validate() {
    for (var field in document.getElementsByTagName('input')) {
        if (isPriceField(field)) {
            field.value = field.value.trim();
            if (isNaN(parseFloat(field.value))) {
                return alertAndFocus(field, "Please enter a valid price");
            }
        }         
    }

    return true;
}

function isPriceField(field) {
    return (field.name.substr(0, Math.min(5, field.name.length)) === 'price')
}

function alertAndFocus(field, message) {
    alert(message);
    field.focus();
    return false;
}