Javascript add/remove attribute for data-required="true"

Question

HTML

<select name="CustomerType" id="CustomerType" class="form-control" onchange="CustomerTypeChange()">
    <option value="@((int)THOS.Utilities.Enumerations.Enumerations.Customer.CustomerType.Company)" selected="@(Model != null ? (Model.CustomerType == (int)THOS.Utilities.Enumerations.Enumerations.Customer.CustomerType.Company):true)">Company</option>
    <option value="@((int)THOS.Utilities.Enumerations.Enumerations.Customer.CustomerType.Person)" selected="@(Model != null ? ((Model.CustomerType == (int)THOS.Utilities.Enumerations.Enumerations.Customer.CustomerType.Person)) : false)">Person</option>
</select>

<input type="text" name="TaxNumber" id="TaxNumber" class="form-control parsley-validated">

When CustomerType change below js code runs

Javascript Code:

function CustomerTypeChange() {
    var customerType = document.getElementById("CustomerType").value;
    if (customerType == 10) {
        $('#TaxNumber').attr("data-required", 'false');
    }
    if (customerType == 20) {
        $("#TaxNumber").attr("data-required", 'true');
    }
}

When i add TaxNumber attribute true/false attr("data-required", true) or attr("data-required", false) never works .

Edited:

 $("#TaxNumber").data('data-required', true); does not work too

 $("#TaxNumber").data('required', true); does not work too

If i check browser console there is no any error where i miss exactly ?

Thanks.

Use `.data()` like `$('#TaxNumber').data('required', true/false);` for details read http://stackoverflow.com/questions/7261619/jquery-data-vs-attr — Satpal, Sep 25 '14 at 08:46
instead of `$("#TaxNumber").data('data-required', true)` it should be only `$("#TaxNumber").data('required', true)` — Kartikeya Khosla, Sep 25 '14 at 08:55
@John, Are you using any validation framework? A wild guess `$("#TaxNumber").attr('required', true);` — Satpal, Sep 25 '14 at 09:03
@Satpal: Not sure why so many comment upvotes, but you would never use `data` to set this as it must be a `data-`attribute (and not stored in the element data store - which later browsers would do). You must use `attr`. — iCollect.it Ltd, Sep 25 '14 at 09:07
@John Can you use `console.log(customerType)` and check if the value is actually correct. — Anton, Sep 25 '14 at 09:11
Ignoring my suggested improvements below, your original code works too: http://jsfiddle.net/TrueBlueAussie/CmW9e/2/. Are you expecting the validation to automatically pick up the change to the `data-required` attribute? If so what validation framework are you using, as many do not do that? — iCollect.it Ltd, Sep 25 '14 at 09:14

iCollect.it Ltd · Accepted Answer · 2014-09-25T09:26:12.880

Suggested improvements:

When using jQuery avoid connecting events via attributes. Also use jQuery for select value checking (using val()).

Remove the onchange attribute and try this instead:

// Shortcut DOM ready handler
$(function(){
    // Listen for change event
    $('#CustomerType').change(function(){
        // Use jQuery val() to get select values
         var customerType = $(this).val();
         if (customerType == 10) {
            $("#TaxNumber").attr("data-required", 'false');
         }
         if (customerType == 20) {
            $("#TaxNumber").attr("data-required", 'true');
         }
    });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/CmW9e/1/

If you inspect the DOM you will see the data-required attribute is set correctly.

Your original "works" too:

Your original code also works: http://jsfiddle.net/TrueBlueAussie/CmW9e/2/ so it is more likely the problem that your validation framework does not pickup dynamic changes to the required flag. Is the issue actually that you expected the validation rules to update automatically based on that attribute?

Solution:

Most validation frameworks allow you to change the rules client-side (add and remove rules etc), but you will need to provide details of the validation framework you are using to get a specific answer :)

I copied and pasted and checked, data-required part is not working. — John, Sep 25 '14 at 09:01

Javascript add/remove attribute for data-required="true"

1 Answers1