我有来自 Wordpress 的以下 PHP 模板。我正在尝试使用 JQuery Validation 插件向表单字段添加一些验证。这些字段的标题为“newsletter_first_name”、“newsletter_last_name”和“newsletter_email”，我希望用户只有在填写完所有字段后才能提交表单，并且用户已承诺捐款致慈善机构。但是，在使用 Jquery Validation 插件编辑表单时，表单仍然提交并且验证不起作用。
这与 PHP 函数中的表单有关吗？有没有人有关于如何解决这个问题的任何提示？注意 - 这不是 Contact Form 7 构建的表格。
我的代码如下：
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' );