Question

我有一个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，我为1输入valOne，我的提醒会弹出。

当我将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);
}

Answer 1

选项一

要简单地继续使用当前的javascript验证，您可以更改jQuery触发器。我相信在你当前的触发器中，返回值实际上是返回到.ready（）函数，因此，如果你愿意的话，它就被吸收了＃34;

此外，当函数以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插件来实现您的目标。

我倾向于阻止随机<script>块注入<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函数中的所有变量

1 个答案: