如何在PHP中向此联系表单添加验证？

Question

I have the following PHP template from Wordpress. I am trying to add some validation to the form fields, using the JQuery Validation plugin. The fields are titled 'newsletter_first_name', 'newsletter_last_name', and 'newsletter_email', and I would like it so that the user can only submit the form once all of the fields have been filled in, and the user has promised to make a donation to charity. However, upon editing the form using the Jquery Validation plugin, the form still submits and the validation does not work.

Is this anything to do with the form being inside of a PHP function? Does anyone have any tips as to how to fix this? Note - this was not a form built by Contact Form 7.

My code is as follows:

function sell_media_free_downloads_cart_form() {

        $value = get_post_meta( $_POST['product_id'], 'sell_media_free_downloads', true );
        if ( empty( $value ) )
            return;
        ?>
        <form method="post" name="donate" id="donate">
        <style type="text/css">.total-container, .button-container, .sell-media-form fieldset { display: none; }</style>
        <div class="sell_media_free_downloads_cart_form">
            <h3><?php _e( "Free Download - Voluntary Charity Contribution", "sell_media" ); ?></h3>
            <p class="medium"><?php _e( "All of our photos are free to download, subject to a voluntary donation to charity.", "sell_media" ); ?></p>
            <!--<form id="newsletter_form" name="newsletter_form" action="javascript://" method="POST">-->
            <div id="free_download_form">
                <div class="form-group clearfix">
                <?php wp_nonce_field( 'sell_media_free_download_action', 'free_security' ); ?>
                <label for="newsletter_first_name" class="form-label"><?php _e( "First Name:", "sell_media" ); ?></label>
                <div class="form-field">
                <input type="text" name="newsletter_first_name" value="" id="newsletter_first_name" style="width: 170px" class="required" title="Please enter your name.">
                </div>
                </div>
                <div class="form-group clearfix">
                <label for="newsletter_first_name" class="form-label"><?php _e( "Last Name:", "sell_media" ); ?></label>
                <div class="form-field">
                <input type="text" name="newsletter_last_name" value="" id="newsletter_last_name" style="width: 170px">
                </div>
                </div>
                <div class="form-group clearfix">
                <label for="newsletter_first_name" class="form-label"><?php _e( "Email Address:", "sell_media" ); ?></label>
                <div class="form-field">
                <input type="email" name="newsletter_email" value="" id="newsletter_email" style="width: 170px">
                <input type="hidden" name="product_id" value="<?php echo $_POST['product_id']; ?>" id="product_id" style="width: 170px">
                </div>
                </div>

                <label for="method" id="text" style="margin-top: 20px; position: relative; right: 94px; top: 20px;">Charity:</label>
                <div class="form-field">
                <select name="method" type="select" id="method" style="margin-bottom: -10px; width: 170px; position: relative; left: -12px; float: right; height: 30px; bottom: 27px;">
                    <option value="">-Please select one-</option>
                    <option value="Google">Children in Need</option>
                    <option value="Recommendation">Cancer Research</option>
                    <option value="Advertisement">Oxfam</option>
                    <option value="Other">PDSA</option>
                    <option value="Other">Save the Children Fund</option>
                </select></p><br/>
                </div>


                <div class="form-field">
                <input id="piano" type="checkbox" name="promise" value="Piano" class="required" title="Please check at least one option." style="float: left; margin-right: 10px; margin-top: 0px;">
                </div>

                <div class="form-group clearfix">
                <label id="checkbox" style="float: left; position: relative; bottom: 25px; margin-top: -4px; margin-bottom: 30px;">I promise to make a contribution to the charity of my choice as indicated above</label><br/>
                </div>


                <input class="button" id="free_download_submit" type="submit" value="Submit"><span class="free_loading"><img src="<?php echo WP_PLUGIN_URL . '/' . dirname( plugin_basename( __FILE__ ) ) . '/images/ajax-loader.gif'; ?>"/></span>
                </form>
            </div>
            <div class="alert alert-success" id="newsletter_form_sign_up_success">
                <h3><?php _e( "Sweet! Now check your email. We just sent you something special.", "sell_media" ); ?></h3>
            </div>

        </div>



            **<script src="js/jquery-1.7.2.min.js"></script>
            <script src="js/jquery.validate.min.js"></script>
            <script src="js/jquery.numeric.js"></script>
            <script>
            $(document).ready(function(){
                $('#donate').validate({
                    rules: {
                        newsletter_first_name: {
                            required: true
                        },
                        newsletter_last_name: {
                            required: true
                        },
                        newsletter_email: {
                            required: true,
                            email: true
                        },
                        method: {
                            required: true
                        },
                        promise: {
                            required: true
                        }
                    }, // end rules

                    messages: {
                        newsletter_first_name: {
                            required: "Please enter your first name."
                        },
                        newsletter_last_name: {
                            required: "Please enter your last name.",

                        },

                        newsletter_email: {
                            required: "Please supply your email address."
                            email: "This is not a valid email address."



                        },

                        method: {
                            required: "Please select an option."
                        },
                        promise: {
                            date: "Please check this box."
                        }

                    }, //end messages 
                }); // end validate**
            }); // end ready'

            </script>



    <?php }
    add_action( 'sell_media_cart_below_size', 'sell_media_free_downloads_cart_form' );

Answer 1

1) remove comma in this line:

required: "Please enter your last name.",

2) add comma at the end of this line:

required: "Please supply your email address."