使用jquery.validate.min.js进行Wordpress表单验证不起作用
我在Wordpress中有一个定制的表单(我考虑过使用表单插件,但它是一个三步表单,我看到的插件似乎都不合适)。我尝试按照以下步骤实现表单验证插件: 以下是我在wordpress模板中得到的内容:使用jquery.validate.min.js进行Wordpress表单验证不起作用,wordpress,jquery-validate,validation,Wordpress,Jquery Validate,Validation,我在Wordpress中有一个定制的表单(我考虑过使用表单插件,但它是一个三步表单,我看到的插件似乎都不合适)。我尝试按照以下步骤实现表单验证插件: 以下是我在wordpress模板中得到的内容: <form name="lpsOrderForm" id="lpsOrderForm" method="post" class="contact-form" action="/payment-information/"> <input name=action type=hidden
<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>
}
这是插件文件,我称之为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);
?>
jQuery(文档).ready(函数($){
$('#lpsOrderForm')。验证({
规则:{
lps_交付名称:{
要求:正确,
},
lps_交付地址1:{
必填项:true
},
lps_配送城市:{
必填项:true
},
lps_配送Zip:{
要求:正确,
最大长度:5,
数字:真
},
},
信息:{
lps_deliveryName:“请输入样本/交付地址的名称。”,
lps_deliveryAdd1:“请输入样本/递送地址的街道地址。”,
lps_deliveryCity:“请输入样本/交付地址的城市。”,
lps_deliveryZip:“请输入样本/交付地址的5位邮政编码。”
}
});
});
当我没有在字段中放置任何内容并单击Submit时,它只会转到下一页。我是Wordpress的新手,所以这很可能是一个简单的修复。我怀疑它与表单操作有关,但我不确定如何更改它以使表单验证生效。当我查看源代码时,我在头部看到了JS文件,并且在Firebug中没有发现任何错误。任何意见都将不胜感激
*注意:我故意删除了状态输入,因为它是从Wordpress中的php evaluator插件中加载的,我不想让它变得更加混乱。我继续做了这个项目需要完成的其他事情,然后又重新验证了表单。结果我需要在输入中添加“class=required”。现在真是魅力四射!愚蠢…我接着做了这个项目需要完成的其他事情,然后又开始验证表单。结果我需要在输入中添加“class=required”。现在真是魅力四射!愚蠢…当您检查firebug是否有错误时,是否在单击“提交”后进行检查?是否有其他JavaScript代码未显示给我们?任何其他
单击
或提交
事件处理程序?这些可以超越插件自己的提交事件处理程序.Jrod——我正在检查提交前后的Firebug。Sparky-我确实将onchange事件绑定到一些选择框。我已经编辑了这篇文章,并在上面添加了额外的代码。当你检查firebug的错误时,你是在点击提交后检查的吗?你有没有其他JavaScript代码没有显示给我们?任何其他单击
或提交
事件处理程序?这些可以超越插件自己的提交事件处理程序.Jrod——我正在检查提交前后的Firebug。Sparky-我确实将onchange事件绑定到一些选择框。我已经编辑了这篇文章,并在上面添加了额外的代码。
<?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);
?>