javascript - 每次运行时清空 javascript 函数中的所有变量

标签 javascript

我有一个 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/

相关文章:

javascript - nnnn-nnnn 形式的字符串在电子表格中显示为日期或以其他方式错误显示

javascript - 迭代数组并等待 promise

javascript - 如何通过提供的属性交换数组内的对象顺序

javascript - 抓取引用,设置默认值

javascript - 拼接后更新 JSON 文件

javascript - Wicket:通过ajax上传数据

javascript - 原型(prototype)和对象包装器在 JavaScript 中如何工作?

javascript - 在页面加载时调用 javascript 函数不起作用

javascript - 我在使用 ng-model 时遇到双向数据问题

javascript - 有 Angular 。如何使用 xeditable 将 ui.select 注入(inject)指令?