.attr() returning attribute name

Question

I have a html element:

<input type='text' runat='server' name='RM1' id='RM1' required='5' readonly>

I need to have the value of the attribute 'required' this I do using jQuery, but when I run

$('#RM1').attr('required')

The return value is "Required", though it should be 5. when I run $('#RM1').attr('id') RM1 is returned.

Anyone knows what I am doing wrong?

note: the code is generated by C# that's runat is set to server.

You probably need to use value instead of required. The latter is only true or false. — Gerard, May 20 '17 at 13:07

john Smith · Accepted Answer · 2017-05-20T14:00:40.227

4

required is a reserved attribute name for form-validation

Implementations differ but this one is true or false, "Required" evaluates to true and this attribute doesnt need a value at all, if attribute exists = true if not = false,

so:

<input required >
<!-- returns the same value (truthy) as -->
<input required="23432abc" >

your solution: use another attribute name!

edited May 20 '17 at 14:00

answered May 20 '17 at 13:07

john Smith

17,409
11
76
117

"use another attribute name" - Such as `data-required`. Anything that doesn't start with `data-` might be reserved one day. – John Dvorak May 20 '17 at 14:02
Thats right, but in addition,stick to `.attr()` you can access all of them with , personaly i realy dont like the inconsistency with `.data()` – john Smith May 20 '17 at 14:50
oops, you are right! but still i think `.data()` is unnecessary and i would advice to stick to `.attr()` – john Smith May 20 '17 at 14:52
Why would you stick to `attr`? `attr` can only hold strings, jQuery's `data`store can hold arbitrary objects and is merely initialized from the `data-`attributes. – John Dvorak May 20 '17 at 14:54
im aware but in OP´s context it doesnt make much sense as he/she doesnt have any object values – john Smith May 20 '17 at 14:57

score 1 · Answer 2 · edited May 23 '17 at 12:18

The <input>'s require attribute is of type boolean. It can't hold a numeric value:

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing white space.

What you wrote is actually invalid HTML(5):

Error: Bad value 5 for attribute required on element input.

However, your browser still handles this incorrect value gracefully by interpreting it as "required".

See also: Setting an attribute named "required" and any value, with JQuery, doesn't work

score 1 · Answer 3 · answered May 20 '17 at 13:12

1

Use the dataset of the element, for instance you can do:

<input type='text' runat='server' name='RM1' id='RM1' data-required='5' readonly>

When you need to retrieve the value of 'data-required' do:

$('#RM').data('required') // returns 5

answered May 20 '17 at 13:12

Simeon Simeonoff

156
2
7

score 0 · Answer 4 · answered May 20 '17 at 13:17

That is because required is a boolean attribute.

if you want to store custom data you can use data- attribute

Example

var id = $('#RM1').data('id');

console.log(id);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' runat='server' name='RM1' id='RM1' data-id='5' readonly>

score 0 · Answer 5 · answered May 20 '17 at 13:28

According to HTML attribute reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

The required attribute are reserved

Use attr like requiredNum instead, see example:

console.log( $('#RM1').attr('requiredNum') )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' runat='server' name='RM1' id='RM1' requiredNum='5' readonly>

.attr() returning attribute name

5 Answers5