Validation in Newly designed Web Forms fields

Validation script in main.js of web Content portlet  for new fields added  in Structure.

                Validation in Newly designed Web Forms.

 please go to main.js file under jsp/html/portlet/journal/js/main.js 

in the hook .

// ** This below code returns the instance of Select Tag Category section whose  Id=’journalCategorizationPanel' . Else returns null of that Id is not found on the page.

var categoryFieldConatainer = A.one('#journalCategorizationPanel');

//** This element is created when we create select a tag under categorization panel .Logic is that when we try to get Instance of newly created tag, Based on the Instance we decide whether we need to show error message or not.

var selectedTags = A.one('#journalCategorizationPanel .lfr-tags-selector-content ul.aui-textboxlistentry-holder li.aui-textboxlistentry');

//this below code is for removing Error message after the page is submitted or refreshed.

if(selectedTags){

      categoryFieldConatainer.removeClass('required-field');

      }

           

//added by srikanth for Select tag validation i.e. to get error message. On that Categry Section whose Id we defined earlier.

if(!selectedTags){

      categoryFieldConatainer.addClass('required-field');  

      categoryFieldConatainer.show();

      canSubmit = false;

                             

}

canSubmit : variable is used in the validateRequiredFields() ,it is a Boolean variable based on which we decide whether to submit the Web Form or not.

NOTE: Add this code Under that Id in the Jsp were you want add the Error Message after your validations.

<div class="journal-article-required-message portlet-msg-error">

      <liferay-ui:message key="this-field-is-required" />

</div>

You can change the Key as you wish.

Here is the full code where we also did child field validations

Function call for Validation.

var canSubmit = instance.validateRequiredFields();

if (canPublish){

      form.submit();

  }

Validation Function.

validateRequiredFields: function() {

var instance = this;

var canSubmit = true;

var structureTreeId = instance._getNamespacedId('#structureTree');

var fields = A.all(structureTreeId + ' li');

var requiredFields = fields.filter('[dataRequired=true]');

var childRequiredFields = fields.filter('[datachildrequired=true]');

var fieldsConatainer = A.all(structureTreeId + ' li .field-container');

//added by srikanth for Select tag validation

var categoryFieldConatainer = A.one('#journalCategorizationPanel');

var selectedTags = A.one('#journalCategorizationPanel .lfr-tags-selector-content ul.aui-textboxlistentry-holder li.aui-textboxlistentry');

var firstEmptyField = null;

fieldsConatainer.removeClass('required-field');

if(selectedTags){

categoryFieldConatainer.removeClass('required-field');

}

                       

A.each(requiredFields,function(item, index, collection) {              

var fieldInstance = instance.getFieldInstance(item);

var content = fieldInstance.getContent(item);

if (!content) {

      var fieldConatainer = item.one('.field-container');

      fieldConatainer.addClass('required-field');

      if (canSubmit) {

            firstEmptyField = instance.getPrincipalFieldElement(item);

            }

      canSubmit = false;

}

}

);

                       

//Added by Manas for child required field

                 

A.each(childRequiredFields,function(item, index, collection) {

                                   

var fieldInstance = instance.getFieldInstance(item);

var content = fieldInstance.getContent(item);

if (content) {

var childItem = instance.getSibling(fieldInstance);

      var childFieldInstance = instance.getFieldInstance(childItem);

      var childContent = childFieldInstance.getContent(childItem);

      if(!childContent){

            var childFieldConatainer = item.one('.field-container');

            childFieldConatainer.addClass('required-field');

            if (canSubmit) {

              firstEmptyField = instance.getPrincipalFieldElement(childItem);

            }

            canSubmit = false;

      }

}

}

);

                       

//added by srikanth for Select tag validation  

if(!selectedTags){

      categoryFieldConatainer.addClass('required-field');

      canSubmit = false;

      }

if (firstEmptyField) {

      firstEmptyField.focus();

      window.scrollBy(0,-60);

      }

return canSubmit;

},