我有一个 JavaScript 验证函数,如下所示 -
触发器
add_action ('wp_head', 'trigger_validatior');
function trigger_validatior() {
echo'
<script>
jQuery(document).ready(function($) {
$("#gform_submit_button_5").click(function() {
return Form_5_Contact_Validator(gform_5);
});
});
</script>
';
}
函数(简化)
如果 (1) 字段不为空并且 (2) 字段值小于 2
,则我演示的验证应该运行。 (如果该字段留空,我不希望该函数运行。)
function Form_5_Contact_Validator(Form){
var valOne = Form.input_1.value; // get form data
if (valOne < '2' && valOne != ''){ // validation check, if fails - then...
alert("Error: Alert Error."); // alert the user
return (false);
} // endif
var valTwo = Form.input_2.value;
if (valTwo < '1' && valTwo != ''){
alert("Error: Alert Error.");
return (false);
}
} // end validation
如果我在表单中输入的数据不正确 - IE,我为 valOne
输入 1
,我的警报就会弹出。
当我将 valOne
中的值更正为 2 或更大时,不会弹出任何警报但我的表单无法提交。为什么即使在我更正值后,return (false);
仍保持事件状态?
解决方案
我尝试在函数的开头添加 return(true);
,该函数在执行验证之前只是返回 true。
我尝试在函数末尾添加 return(true_;
),但即使值正确,该函数仍然无法完成。
我尝试像这样修改验证语句:
var valTwo = Form.input_2.value;
if (valTwo < '1' && valTwo != ''){
alert("Error: Alert Error.");
return (false);
} else {
return (true);
}
最佳答案
选项一
要简单地继续您当前拥有的 JavaScript 验证,您可以更改 jQuery 触发器。我相信在您当前的触发器中,返回值实际上返回到 .ready() 函数,因此如果您愿意的话,它会被“吸收”。
此外,请确保当函数以 return false
结尾时停止 jQuery 执行默认操作。 ,因为默认行为是允许后续函数继续运行。
请尝试像这样修改您的触发器:
<script>
jQuery(document).ready(function($) {
$("#gform_submit_button_5").click(function(event) {
if (Form_5_Contact_Validator(gform_5)) {
$(gform_5).submit();
}
event.preventDefault();
event.stopPropagation();
});
});
</script>
选项二
您当前的解决方案不符合某些最佳实践标准。考虑以下选项:
通过安装和使用Jquery Validation For Contact Form 7,您也许能够实现您想要做的事情。插件。
我倾向于不鼓励随机注入(inject) <script>
block 进入 <head>
。以我的愚见,这是不好的做法。
如果建议的 WordPress 插件不能满足您的需求,并且由于我看到这里涉及 jQuery,那么让我推荐 jQuery Validation Plugin .
通过将以下内容添加到适当的 functions.php
来注册并排队以使用 WordPress文件:
<?php
/**
* form_add_scripts - callback for registering the form's required javascript files
*
* @return void
*/
function form_add_scripts() {
$base = array("jquery");
$custom = array("jquery", "jquery-validate-script", "jquery-validate-script-additional");
wp_register_script("jquery-validate-script", "//cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js", $base);
wp_enqueue_script("jquery-validate-script");
wp_register_script("jquery-validate-script-additional", "//cdn.jsdelivr.net/jquery.validation/1.14.0/additional-methods.min.js", $base);
wp_enqueue_script("jquery-validate-script-additional");
wp_register_script("form-script", get_stylesheet_directory_uri()."/form.js", $custom);
wp_enqueue_script("form-script");
}
// inform wordpress of the additional scripts
add_action("wp_enqueue_scripts", form_add_scripts);
functions.php
可以通过 wp-content/themes/name-of-theme
找到目录(您当前使用的主题的),或者如果您像我一样,并且希望在几乎不需要手动操作的情况下进行更新,请创建一个子主题(您可以在 wordpress codex 上找到它。会发布一个链接,但我没有足够的代表)。
列出的最后一个注册/排队文件,get_stylesheet_directory_uri()."/form.js"
,意味着进入与 functions.php
相同的目录文件,您将在其中添加前面的代码块。您可以在此处放置任何自定义触发器(如果您甚至需要它们),也可以定义应进行哪种类型的验证。
get_stylesheet_directory_uri()."/form.js"
jQuery(document).ready(function ($) {
// http://jqueryvalidation.org/documentation/
$('#form-id-name').validate({
rules: {
'input-one-id-name': {
digits: true,
min: 2
},
'input-two-id-name': {
digits: true,
min: 2
}
}
});
});
可以根据需要定制错误消息的样式和措辞。请参阅验证插件文档。
关于javascript - 每次运行时清空 javascript 函数中的所有变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34855790/