jQuery Form Validator - How to change the data-validation-optional property using javascript?

Question

I'm currently using jQuery Form Validator (http://formvalidator.net/#home). I currently have three input boxes that take in a phone number (3 numbers, 3 number, 4 numbers). Since the phone number is optional, all three input boxes are optional (data-validation-optional = "true"). Validation (making sure only numbers are entered) works fine for all three boxes but my problem is that the validation plugin doesn't check to make sure all three boxes are filled in. This is a problem because a user can fill in one box but leave the other two empty.

The way I can solve this is to check if all three boxes have an empty string when the form is submitted. If so than do nothing, but if only one box is submitted than make all three boxes mandatory (data-validation-optional = "false").

I'm having trouble changing the inline data-validation-optional property of an input using JavaScript. When I use document.getElementById("phone1").data-validation-optional = "false" it gives me a javascript error.

Here is my current code:

input:

<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 
        }
    }
})  

Any help would be appreciated! Thanks!

Answer 1

Try

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

or

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

Both will address the data item set with data-validation-optional="..." though I'm not sure whether validation will be affected. I can't find any evidence of a 'validation' event for individual form elements, nor can I find evidence that the validation plugin will respond to hot-swapping of data properties. You may also need to 'destroy' then re-invoke the plugin.

Answer 2

The problem you are having is you aren't accessing the data attributes the correct way. I notice you're using jQuery, so you might as well leverage it. In jQuery, you can use .attr() and .data() to access data attributes.

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

Victorjonsson's validator accesses the data-validation-*="" attributes using .attr(), so don't use .data() to change them, because values set with data() cannot be accessed with .attr(). The reverse is also true.

Upside of this approach is you won't need to re-initialize the plugin every time you change something.

---

If you'd prefer to not use jQuery and opt for vanilla javascript, you use el.getAttribute('data-foo'); and el.setAttribute('data-foo', 'bar'); to access your data attributes. See this answer for more on that.

In your case, the code should be:

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