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屬性？

回答

相關問題