Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Granit UI Fileupload has no required field

Avatar

Level 3

Hi,

I can't find the property "required" in the granite ui filepuload field (https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/founda...). A lot of other fields (e.g. textfield) has this property. Why is it missing in fileupload field and is there a way to solve this requirement?

regards

Reini

1 Accepted Solution

Avatar

Correct answer by
Administrator

Hi 

The workaround for this is to write own custom validator, it is very easy.

Please have a look at this :-

Registering custom validators is done by calling the jQuery based $.validator.register method. The register method takes a single JavaScript object literal argument. The parameter looks for four properties: selector, validate, show and clear, of which only selector is required.

$.validator.register({
  selector: '.field-phonenumber',
  validate: function(el) {
    var field,
        value;

    field = el.closest(".coral-Form-field");
    value = el.val();

    if (!/^\d{3}-\d{3}-\d{4}$/.test(value)) {
      return Granite.I18n.get('The field must be a phone number in the format of "xxx-xxx-xxxx"');
    }
  },
  show: function (el, message) {

<code>

},
  clear: function (el) {
    var field = el.closest(".coral-Form-field");

   <code>

  }
});

 

Please have a look at this community article written by Nate Yolles :- http://www.nateyolles.com/blog/2016/02/aem-touch-ui-custom-validation

 

I hope this will help you.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

View solution in original post

1 Reply

Avatar

Correct answer by
Administrator

Hi 

The workaround for this is to write own custom validator, it is very easy.

Please have a look at this :-

Registering custom validators is done by calling the jQuery based $.validator.register method. The register method takes a single JavaScript object literal argument. The parameter looks for four properties: selector, validate, show and clear, of which only selector is required.

$.validator.register({
  selector: '.field-phonenumber',
  validate: function(el) {
    var field,
        value;

    field = el.closest(".coral-Form-field");
    value = el.val();

    if (!/^\d{3}-\d{3}-\d{4}$/.test(value)) {
      return Granite.I18n.get('The field must be a phone number in the format of "xxx-xxx-xxxx"');
    }
  },
  show: function (el, message) {

<code>

},
  clear: function (el) {
    var field = el.closest(".coral-Form-field");

   <code>

  }
});

 

Please have a look at this community article written by Nate Yolles :- http://www.nateyolles.com/blog/2016/02/aem-touch-ui-custom-validation

 

I hope this will help you.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni