Granit UI Fileupload has no required field | Community
Skip to main content
R
Reini1
Level 2
July 26, 2016
Solved

Granit UI Fileupload has no required field

  • July 26, 2016
  • 1 reply
  • 1363 views

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/foundation/form/fileupload/index.html). 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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kautuk_sahni

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

1 reply

kautuk_sahni
Community Manager
kautuk_sahniCommunity ManagerAccepted solution
Community Manager
July 26, 2016

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
Terms & ConditionsAccessibility statement

Loading footer...