0

If I have input element rendered like this

<input id="Requester_Value" class="form-control ui-autocomplete-input valid" type="text" value="" name="Requester.Value" autocomplete="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." 
9
  • You can use data(), just make sure you do it before you instantiate the plugin which reads those properties. Commented Apr 20, 2016 at 8:43
  • 1
    Do you need to add attributes or to associate some data- with the element? Commented Apr 20, 2016 at 8:43
  • 3
    @RoryMcCrossan: data won't add data-* attributes. That's a common misconception. 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-autocomplete-input valid"}) and putting the [RequiredAttribute] on your property? 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.net/vukxk5e9 Commented Apr 20, 2016 at 8:53

5 Answers 5

4

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

$('#Requester').attr("data-val-required","The Requested value field is required.");
Sign up to request clarification or add additional context in comments.

Comments

1

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.")

Comments

1

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.

Comments

0

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.");

Comments

0

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.net/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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.