CodingForums.com - View Single Post

Old Pedant · 05-02-2011, 12:22 AM

Here's another variation that simplifies the HTML even further: No id's needed for the <label>s. Flexibiity on minimum length for text fields.

Code:

<html>
<head>
<script type="text/javascript">
function colorLabel(field,okay)
{
    // find the label that contains the given field...
    var node = field.parentNode;
    while ( node.tagName.toLowerCase() != "label" )
    {
        node = node.parentNode;
        if ( node == null ) 
        {
           alert("Label not found for field " + field.name);
           return okay;
        }
    }
    // and set its color according to the flag
    node.style.backgroundColor = okay ? "transparent" : "pink";
    // and by returning the flag, we simplify the code in the callers
    return okay;
}

function validateSelect(select)
{
    return colorLabel(select, select.selectedIndex != 0);
}

function validateTextLength(input,min)
{
    var text = input.value.replace(/\s/g,"");
    return colorLabel( input, text.length >= min );
}

// notice how we passed the reference to the <form> object into this function:
function validateForm(form)
{
    // notice how we can so easily refer to the form fields by name:
    var okay = validateSelect(form.product)
             & validateSelect(form.qty)
             & validateTextLength(form.fname, 3);

    if ( okay == 0 ) alert("Please correct the indicated errors");
    return okay != 0;
}
</script>
<body>
<form action="" onsubmit="return validateForm(this)" method="get">
<label> 1) Product
  <select name="product">
    <option value="">Select a Product</option>
    <option value="3.5">Green/Purple Fountain: $3.50 ea.</option>
    <option value="4.95">Silver Cone: $4.95 ea.</option>
    <option value="6.95">Glitter Cone: $6.95 ea.</option>
    <option value="9.95">Glittering Stars: $9.95 ea.</option>
    <option value="19.95">Fountain Kit: $19.95 ea.</option>
    <option value="29.95">Fountain Kit Deluxe: $29.95</option>
    <option value="39.95">Giant Fountain: $39.95</option>
  </select>
</label>
<br />
<label> 2) Quantity
  <select name="qty">
    <option value="">Select a Quantity</option>
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
    <option value="4"> 4</option>
    <option value="5"> 5</option>
    <option value="6"> 6</option>
    <option value="7"> 7</option>
    <option value="8"> 8</option>
    <option value="9"> 9</option>
    <option value="10">10</option>
  </select>  
</label>
<br/><br/>
<label> 4) First Name
  <input name="fname" size="20" type="text" />
</label>
<br/><br/>
<input type="submit" value="Submit Order" />
</form>

</body>
</html>