I have a input text type
<input type="text" name="firstNameInd" style="width:200px;" required="true" maxlength="100" />
"required" is a custom attribute which i access using javascript.
This is working fine in IE 7 and 8, but not in IE10 it shows required="".
Might be it was due to that required is an attribute in HTML5.
Can any one suggest what to do?
Assuming HTML5 doctype, the required attribute is reserved. You should use the data- prefix for custom attributes:
<input type="text" name="firstNameInd" style="width:200px;" data-required="true" maxlength="100" />
Which you can access like so:
var required = foo.getAttribute('data-required') // where foo is reference to your input
If I misunderstood you and you want to really use a custom attribute, you cannot use the name required.
It is reserved in the HTML 5 standard. You have to use data-required and access it via dataset:
element.dataset.required
// or
element.getAttribute("data-required");
required or nothing as the attribute's value!
<input type="text" ... required="required" />
<input type="text" ... required />
The required attribute is per spec a boolean attribute.
These rules apply to a boolean attribute:
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 whitespace.
— http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute
In html5 custom attributes begins with data-* You can use
<input type="text" name="firstNameInd" style="width:200px;" data-required="true" maxlength="100" />
then access it as
getAttribute("data-required")
further readings
http://html5doctor.com/html5-custom-data-attributes/
thanks
required is NOT a custom attribute; it's part of the HTML5 standard. And true is not a valid value for it. This is probably why it's not working.
If you need custom attributes, the correct standards-compliant way to do it is to alwats prefix them with data-. This ensures that there will never be a clash with any future additions to the standard set of HTML attributes.
In this case, if you want to use the HTML5 required attribute, it works as a boolean attribute, similar to disabled and readonly, in that you only need to specify the attribute name, without a value, for it to apply. The standards-compliant HTML5 code would look like this:
<input type="text" name="foo" required maxlength="100">
This would add the required property to the element in the DOM. You can then toggle that property on or off using Javascript by setting it to true or false (ie the boolean values, not strings). And you can access in JS by simply checking whether it is set.
Note that your JS code will need to cater for the fact that in recent HTML5-compliant browsers, the browser will already be doing some validation for you when you have the required property set; you may need to drop some of your existing code when running in modern browsers, or at least adapt it to handle all cases.
If you really want to have a custom property, you would use data-required="whatever", but that's unlikley to be necessary in this case, unless you want significantly different behaviour with required to the HTML5 standard.
