How to add a property in to HTML Tag use Jquery?

Question

I am trying to add a Property In to a tag while select that tag

I need to add Invalid property like this ....aria-readonly="false" invalid>

Page load Code:-

function setFieldRequired1(field) {

    var dropdownField=$("[data-metatype='dropdown'][name='./jcr:content/metadata/document_type']");

      if (!field.val()) {
        dropdownField.prop('invalid', 'invalid');
        dropdownField.attr('aria-required', 'true');
        dropdownField.attr('aria-invalid', 'true');
        var icons = $(dropdownField.siblings('.coral-Form-fielderror'));
        icons.show();
      }
       else
      {
         dropdownField.attr('aria-required', 'false');
        dropdownField.attr('aria-invalid', 'false');
        dropdownField.removeProp('invalid');
        var icons = $(dropdownField.siblings('.coral-Form-fielderror'));
        icons.hide();
      }

}

This code working fine But when I select same dropdown with empty value also i have to add that invalid property? Any help?

Answer 1

You cannot use attribute names separated by hyphen in javascript.

You have to convert it to camel casing.

For example :

1. aria-required --> ariaRequired

2. aria-invalid --> ariaInvalid

Answer 2

there are some small differences between attr and prop method in jquery. hope the samples explain it for you. and take care witch prop. second parameter has to be boolean not string.

Original HTML TAG

<div id="container"></div>

JS:

$('#container').prop('disabled', true);

generates:

<div id="container" disabled></div>

JS:

$('#container').attr('disabled','disabled');

generates:

<div id="container" disabled="disabled"></div>