1

我在 Wordpress 中有一个自定义构建的表单（我考虑使用表单插件，但它是一个 3 步表单，我看到的插件似乎都不合适）。我正在尝试按照此处的步骤实现表单验证插件：http: //www.problogdesign.com/wordpress/validate-forms-in-wordpress-with-jquery/

这是我的 wordpress 模板中的内容：

<form name="lpsOrderForm" id="lpsOrderForm" method="post" class="contact-form" action="/payment-information/">
<input name=action type=hidden value=lps_calc>
<input name=page type=hidden value=2>
<input name=size type=hidden value=2>
<ul class=form-list>
<li><label>Paper</label></li>
<li><select name=paper id=paper onchange="lps_calcprice()">
<option value=4 >70# Gloss</option>
<option value=5 >7 Pt Reply/Uncoated</option>
</select></li>
</ul>
<ul class=form-list>
<li><label>Ink</label></li>
<li><select name=ink id=ink onchange="lps_calcprice()">
<option value=6 >Full Color Both Sides</option>
<option value=7 >Full Color One Side</option>
</select></li>
</ul>
<ul class=form-list>
<li><label>Bleed</label></li>
<li><select name=bleed id=bleed onchange="lps_calcprice()">
<option value=8 >Yes Bleed</option>
<option value=9 >No Bleed</option>
</select></li>
</ul>
<ul class=form-list>
<li><label>Fold</label></li>
<li><select name=fold id=fold onchange="lps_calcprice()">
<option value=0>None</option>
<option value=10 >Half-Fold</option>
<option value=11 >Quarter-Fold</option>
<option value=12 >Tri-Fold</option>
<option value=13 >Double Parallel-Fold</option>
</select></li>
</ul>
<ul class=form-list>
<li><label>Bindery</label></li>
<li><select name=bindery id=bindery onchange="lps_calcprice()">
<option value=0>None</option>
<option value=14 >One Perf</option>
<option value=15 >Two Perfs</option>
<option value=16 >Three Perfs</option>
<option value=17 >Four Perfs</option>
<option value=18 >Five Perfs</option>
<option value=19 >L Perf</option>
</select></li>
</ul>
<ul class=form-list>
<li><label>Quantity</label></li>
<li><select name=quantity id=quantity onchange="lps_calcprice()">
<option value=0>0</option>
<option value=20 >1000</option>
<option value=21 >2000</option>
<option value=22 >3000</option>
<option value=23 >4000</option>
<option value=24 >5000</option>
<option value=25 >10000</option>
<option value=31 >15000</option>
<option value=26 >25000</option>
<option value=27 >50000</option>
<option value=28 >75000</option>
<option value=29 >100000</option>
</select></li>
</ul>
    <ul class="form-list">
        <li><label>Company/Name:</label></li>
        <li><input class="fws4" type="text" name="lps_deliveryname" id="lps_deliveryname"/></li>
    </ul>
    <ul class="form-list">
        <li><label>Address Line 1:</label></li>
        <li><input class="fws4" type="text" name="lps_deliveryadd1" id="lps_deliveryadd1"/></li>
    </ul>
    <ul class="form-list">
    <li><label>Address Line 2:</label></li>
        <li><input class="fws4" type="text" name="lps_deliveryadd2" id="lps_deliveryadd2"/></li>
    </ul>
    <ul class="form-list">
        <li><label for="city">City:</label></li>
        <li><input class="small-tbox" type="text" name="lps_deliverycity" name="lps_deliverycity" id="lps_deliverycity"/></li>
       <li><label for="states">State:</label></li>
       <li><label for="zip">Zip:</label></li>
       <li><input class="small-tbox" type="text" name="lps_deliveryzip" id="lps_deliveryzip"/></li>
    </ul>
    <input class="checkout-button-blue" type="submit" /></fieldset>
</div>
<div class="clear"></div>
</form>

您会注意到选择中的 onchange 调用。该函数计算价格并通过 AJAX 显示并且工作正常。它通过适当的 add_action 调用在我的插件中排队和本地化。这是 lps_calcprice 函数的 javascript 文件：

function lps_calcprice(){
jQuery.post(myAjax.ajaxurl, jQuery("#lpsOrderForm").serialize()
,
function(response_from_the_action_function){
    jQuery("#lps_price").html(response_from_the_action_function);
}
);

}

这是插件文件，我称之为 trace_validate_form：

<?php
/**
 * Plugin Name: Trace Validate Form
 * Description: Validate form data instantly with jQuery. Uses <a     href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Form Validation</a> plugin by Jörn Zaefferer.
 * Version: 1.0
 * Author: Pro Blog Design
 * Author URI: http://www.problogdesign.com/
 * Lic
*/

/**
 * Add jQuery Validation script on posts.
 */
function trace_vc_scripts() {
//  if(is_single() ) {
        wp_enqueue_script( "jquery-validate",     WP_PLUGIN_URL.'/trace_validate_form/js/jquery.validate.min.js', array('jquery') );
    wp_enqueue_style(
        'jquery-validate',
        plugin_dir_url( __FILE__ ) . 'css/style.css',
        array(),
        '1.0'
    );
//  }
}
add_action('init', 'trace_vc_scripts');

/**
 * Initiate the script.
 * Calls the validation options on the comment form.
 */
function trace_vc_init() { ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {

        $('#lpsOrderForm').validate({
            rules: {

                lps_deliveryName: {
                    required: true,
                },

                lps_deliveryAdd1: {
                    required: true
                },

                lps_deliveryCity: {
                    required: true
                },

                lps_deliveryZip: {
                    required: true,
                    maxlength: 5,
                    digits: true
                },
            },
            messages: {
                lps_deliveryName: "Please enter a name for the sample/delivery address.",
                lps_deliveryAdd1: "Please enter a street address for the sample/delivery address.",
                lps_deliveryCity: "Please enter a city for the sample/delivery address.",
                lps_deliveryZip: "Please enter a 5 digit zip code for the sample/delivery address."
            }
        });
    });
</script>
<?php }
add_action('wp_footer', 'trace_vc_init', 999);
?>

当我没有在字段中输入任何内容并单击提交时，它只是转到下一页。我对 Wordpress 相当陌生，所以很可能这是一个简单的修复。我怀疑它与表单操作有关，但我不确定要更改它以使表单验证正常工作。当我查看源代码时，我在头部看到了 JS 文件，并且在 Firebug 中没有任何错误。任何投入将不胜感激！

*注意：我故意删除了状态输入，因为它是从 Wordpress 的 php 评估器插件内部加载的，我不想让它变得更加混乱。

4

1 回答 1

1

我继续做这个项目需要完成的其他事情，然后回到验证表格。原来我需要在输入中添加“class=required”。现在就像一个魅力！愚蠢的...

于 2013-02-17T05:26:27.403 回答