If I have input element rendered like this

<input id="Requester_Value" class="form-control ui-autoplete-input valid" type="text" value="" name="Requester.Value" autoplete="off" aria-invalid="false">

how can I using jquery add attributes to this input element

data-val-required="The Requested value field is required." data-val-number="The field Requester must be a string." 

If I have input element rendered like this

<input id="Requester_Value" class="form-control ui-autoplete-input valid" type="text" value="" name="Requester.Value" autoplete="off" aria-invalid="false">

how can I using jquery add attributes to this input element

data-val-required="The Requested value field is required." data-val-number="The field Requester must be a string." 

• javascript
• jquery
• asp-mvc

• You can use data(), just make sure you do it before you instantiate the plugin which reads those properties. – Rory McCrossan Commented Apr 20, 2016 at 8:43
• 1 Do you need to add attributes or to associate some data- with the element? – haim770 Commented Apr 20, 2016 at 8:43
• 3 @RoryMcCrossan: data won't add data-* attributes. That's a mon misconception. – T.J. Crowder Commented Apr 20, 2016 at 8:44
• 1 Is there any reason why you are not using @Html.TextBoxFor(m => Requester.Value, new { @class="form-control ui-autoplete-input valid"}) and putting the [RequiredAttribute] on your property? – user3559349 Commented Apr 20, 2016 at 8:51
• 4 @guradio: data manages jQuery's data cache, not data-* attributes. jQuery will initialize the data cache from data-* attributes, but using data as a setter does not set the attribute; setting the attribute once you've read the data via data doesn't update data's copy of it. Example: jsfiddle/vukxk5e9 – T.J. Crowder Commented Apr 20, 2016 at 8:53

5 Answers 5

If you want to add an attribute to an element try.

$('#Requester').attr("data-val-required","The Requested value field is required.");

Try this:

$("#Requester_Value").attr("data-val-required","The Requested value field is required.");
$("#Requester_Value").attr("data-val-number","The field Requester must be a string.")

You can use .attr() to get set attribute value:

$('#Requester').attr({'data-val-required':'The Requested value field is required.' ,'data-val-number':'The field Requester must be a string.'});

.attr() with data-* will set the data property as well as attribute value for that element. whereas .data() will only set data property internally and values wont be reflected in attributes.

You can use .attr() to set an attribute of an element, see the jQuery documentation here

    $('#Requester_Value').attr("data-val-required","The Requested value field is required.");

Ok if you want to add this data to input then put your input in container such div and use this method

var $div = $('div');

var spltInp = $div.html().split(' ');

var i = Math.floor(spltInp.length / 3);

var srt = spltInp.splice(i, 0, 'data-val-required="The Requested value field is required." data-val-number="The field Requester must be a string." ');

var newHtm = spltInp.join(' ');

$div.append(newHtm).children().eq(0).remove();

https://jsfiddle/L2roc4ka/

First split() html inside the div (input) then, use some number between array length (i) to avoid putting attr outside the input , and use this number as starting point to index the attr by splice(), finally convert the array to string by join()and append it to your div then remove the old one.

note : avoid using multi classes if you going to use this trick cause it may lead to syntax error and instead put those classes in another container like section and style it or avoid using this one.