Question

我目前正在使用jQuery Form Validator（http://formvalidator.net/#home）。我目前有三个输入框，可以输入一个电话号码（3个号码，3个号码，4个号码）。由于电话号码是可选的，因此所有三个输入框都是可选的（data-validation-optional =“true”）。验证（确保只输入数字）适用于所有三个框但我的问题是验证插件不检查以确保所有三个框都填写。这是一个问题，因为用户可以填写一个框但把另外两个留空。

我可以解决此问题的方法是在提交表单时检查所有三个框是否都有空字符串。如果是，那么什么都不做，但是如果只提交了一个框，则强制要求所有三个框（data-validation-optional =“false”）。

我在使用JavaScript更改输入的内联数据验证可选属性时遇到问题。当我使用document.getElementById（“phone1”）。data-validation-optional =“false”时，它给了我一个javascript错误。

这是我目前的代码：

输入：

<input type="text" id="phone1" name="phone1" tabindex="21" maxlength="3" value="" data-validation="custom" data-validation-regexp="^([0-9]{3})$" data-validation-optional="true" style="position:relative; display:block; left:24px; top:31px; width: 76px; height: 44px; text-align: center; padding-left: 0px;" data-validation-error-msg="- Mobile # is incorrect.">

的javascript：

$('#phone1')
.bind('validation', function() {
    if(String(document.getElementById('phone1').value) == "" &&String(document.getElementById('phone2').value) == "" && String(document.getElementById('phone3').value) == ""){
        //return true - all empty
        document.getElementById("phone1").data-validation-optional = "true";
    }
    else{
        if(String(document.getElementById('phone1').value) == "" || String(document.getElementById('phone2').value) == "" || String(document.getElementById('phone3').value) == ""){
            document.getElementById("phone1").data-validation-optional = "false";
            //return false - at least one is empty
        }
        else{
            document.getElementById("phone1").data-validation-optional = "true";
            //return true - all filled 
        }
    }
})

任何帮助将不胜感激！谢谢！

Answer 1

尝试

$("#phone1").data('validation-optional') = "true";

或

$("#phone1").data('validation-optional') = true;

虽然我不确定验证是否会受到影响，但两者都会解决使用data-validation-optional="..."设置的数据项。我无法找到任何有关验证的证据。单个表单元素的事件，也无法找到验证插件将响应数据属性的热交换的证据。您可能还需要销毁＆＃39;然后重新调用插件。

Answer 2

您遇到的问题是您没有以正确的方式访问数据属性。我注意到你正在使用jQuery，所以你也可以利用它。在jQuery中，您可以使用.attr()和.data()来访问数据属性。

$('#phone1').attr('data-validation-optional', 'true');

Victorjonsson的验证程序使用data-validation-*=""，so don't use .data() to change them访问.attr()属性，因为使用data()无法访问使用.attr()设置的值。反之亦然。

这种方法的优点是，每次更改内容时，您都不需要重新初始化插件。

如果您不想使用jQuery并选择使用vanilla javascript，则可以使用el.getAttribute('data-foo');和el.setAttribute('data-foo', 'bar');来访问您的数据属性。 See this answer了解更多信息。

在您的情况下，代码应为：

document.getElementById('phone1').setAttribute('data-validation-optional', 'true');

jQuery Form Validator - 如何使用javascript更改data-validation-optional属性？

2 个答案: