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

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

我可以解决这个问题的方法是检查表单提交时，如果所有三个框都有空字符串。如果是这样而不是什么都不做，但是如果只提交一个框而不是强制所有三个框（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 
     } 
    } 
})

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

来源

2014-11-16 saber

您可以通过使用类型=“电话”和模式 –

你能否澄清你有什么问题，做到这一点？您提到您在更改内联数据验证可选属性时遇到了问题。你想把它改成什么？目前发生了什么？您可以分享更多的信息和代码来澄清您遇到的问题，这将有助于您更快得到答案！ –

尝试

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

或

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

双方将解决与data-validation-optional="..."设置，虽然我不知道是否验证将受影响的数据项。我无法找到单个表单元素的“验证”事件的证据，也无法找到验证插件将响应数据属性热插拔的证据。您可能还需要“销毁”，然后重新调用该插件。

来源

2014-11-16 05:02:07

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

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

Victorjonsson的验证访问使用.attr()，so don't use .data() to change them的data-validation-*=""属性，因为data()设定值不能与.attr()访问。反过来也是如此。

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

如果你宁愿不使用jQuery和选择香草的JavaScript，您使用el.getAttribute('data-foo');和el.setAttribute('data-foo', 'bar');访问您的数据属性。 See this answer了解更多。

在你的情况下，代码应该是：

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

来源

2017-02-17 17:36:13 FireSBurnsmuP

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

回答

相关问题