Simple form validation

POST #1

How can I validate this simple form (checking for empty field strings)?

                <p>Please select your Gift Certificate amount below. Please also enter your name and the Gift Certificate recipient's name. Once you click 'Buy Now' you will be sent to our Paypal site to complete the purchase.</p>

                    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="sdsafsdafsadfdsafsdafsadfsadfsadfasdfsadfsdaf">
        <table width="100%">
        <tr>
            <td width="130"><input type="hidden" name="on0" value="Amount"><p>Amount</p></td>
            <td><select name="os0">
            <option value="Option 1">$20.00</option>
            <option value="Option 2">$50.00</option>
            <option value="Option 3">$100.00</option>
            </select></td>
        </tr>
        <tr>
            <td><input type="hidden" name="on1" value="To:"><p>To (Full Name):</p></td>
            <td><input type="text" name="os1" maxlength="60" size="30"></td>
        </tr>
        <tr>
            <td><input type="hidden" name="on2" value="From:"><p>From (Full Name):</p></td>
            <td><input type="text" name="os2" maxlength="60" size="30"></td>
        </tr>
        </table>

        <table width="100%" style="margin-top: 10px;">
            <tr>
                <td><input type="hidden" name="currency_code" value="CAD">
        <p><input type="image" src="BUTTON.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"></p>
        <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></td>
                <td align="right"><img src="../paypal_logo.jpg" alt="PayPal" /></td>
            </tr>
        </table>
        </form>

POST #2

function validate_form() { valid = true;

    if ( document.GiftForm.os1.value == "" )
    {
        alert ( "Please fill in the 'Your Name' box." );
        valid = false;
    }
    return valid;
}

-=-=-=-= Form

        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" method="GiftForm" onsubmit="validate_form( )">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="sdsafsdafsadfdsafsdafsadfsadfsadfasdfsadfsdaf">
        <table width="100%">
        <tr>
            <td width="130"><input type="hidden" name="on0" value="Amount"><p>Amount</p></td>
            <td><select name="os0">
            <option value="Option 1">$20.00</option>
            <option value="Option 2">$50.00</option>
            <option value="Option 3">$100.00</option>
            </select></td>
        </tr>
        <tr>
            <td><input type="hidden" name="on1" value="To:"><p>To (Full Name):</p></td>
            <td><input type="text" name="os1" maxlength="60" size="30"></td>
        </tr>
        <tr>
            <td><input type="hidden" name="on2" value="From:"><p>From (Full Name):</p></td>
            <td><input type="text" name="os2" maxlength="60" size="30"></td>
        </tr>
        </table>

        <table w开发者_如何学运维idth="100%" style="margin-top: 10px;">
            <tr>
                <td><input type="hidden" name="currency_code" value="CAD">
        <p><input type="image" src="BUTTON.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"></p>
        <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></td>
                <td align="right"><img src="../paypal_logo.jpg" alt="PayPal" /></td>
            </tr>
        </table>
        </form>

Is jQuery an option? There's a really nice Validation tool http://docs.jquery.com/Plugins/Validation

A couple of hints that should get you going.

Add a submit event handler:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="return validate()">

Give IDs to the input fields you want to get.

<input id="currency_code" type="hidden" name="currency_code" value="CAD">

Write the validation code, return false if you don't want to submit.

<script type="text/javascript">

    function validate() {

        var currencyCode = document.getElementById("currency_code");

        var ok = currencyCode.value !== '';

        return ok;

    }

</script>

Give your form a name (GiftForm)

    <script type="text/javascript">
    function validate_form ( )
    {
        valid = true;

        if ( document.GiftForm.os1.value == "" )
        {
            alert ( "Please fill in the 'Your Name' box." );
            valid = false;
        }

        return valid;
    }
</script>

Here is a simple tutorial along with demo and source code, I hope this works for you, all the best! http://gonga.in/simple-javascript-form-validation/