Liferay is a Gartner Magic Quadrant Leader for the Sixth Year! Find out why
« Back to Web Content...

Web Content Field Validation

(Redirected from Adding field validation in Structure while creating Web Content)

Introduction #

This article describes how to add field validations into web content (e.g. make a field mandatory for submission, or requiring that a field is numeric).

Environment #

Liferay-Tomcat Bundle 6.0 Plugins SDK - Hooks

Sample Structure #

<root>
  <dynamic-element name='name' type='text' validate='mandatory'></dynamic-element>		
</root>

List of JSP Files to be extended using Hooks #

Information about creating JSP Hooks is available in the Liferay Wiki. Create a JSP Hook for the Journal Portlet. Here is a list of files that need to be extended in order to implement validation -

1) edit_article.jsp
2) edit_article_content_xsd_el.jsp
3) edit_structure_xsd_el.jsp
4) edit_structure.jsp

Changes required in edit_structure_xsd_el.jsp #

1) Read the element in the starting the way name and type attributes are read

String elValidate = JS.decodeURIComponent(el.attributeValue("validate", StringPool.BLANK));

2) Define a new hidden element "validate" in the existing table. The table already has a hidden element "_depth".

<td>
<input id="<portlet:namespace />structure_el<%= count.getValue() %>_validate" tabindex="<%= tabIndex.getValue() %>" type="hidden" size="20" value="<%= elValidate %>" />
</td>

Changes required in edit_article_content_xsd_el.jsp #

1) Read the element in the starting

String elValidate = el.attributeValue("validate", StringPool.BLANK);

2) Define a hidden element along with the others like name, type,depth

<input id="<portlet:namespace />structure_el<%= count.getValue() %>_validate" type="hidden" value="<%= elValidate %>" />

Changes required in edit_structure.jsp #

1) Modify the existing getXsd() function and read the validate attribute like the other attributes.

Some code snippet for the same

var elValidate = document.getElementById(portletNameSpace+"structure_el" + i + "_validate");

			if (elDepth != null && elName != null && elType != null) {
				var elDepthValue = elDepth.value;
				var elNameValue = encodeURIComponent(elName.value);
				var elTypeValue = encodeURIComponent(elType.value);
				var elValidateValue = encodeURIComponent(elValidate.value);
				
				if (cmd == "add" || cmd == "remove" && elCount != i) {
					for (var j = 0; j <= elDepthValue; j++) {
						xsd += xmlIndent;
					}
						if(elValidateValue.length == 0){
							xsd += "<dynamic-element name='" + elNameValue + "' type='" + elTypeValue + "'>";
						}
						else{
							xsd += "<dynamic-element name='" + elNameValue + "' validate='" + elValidateValue + "' type='" + elTypeValue + "'>";
						}
					if (cmd == "add" && elCount == i) {
						xsd += "<dynamic-element name='' type=''></dynamic-element>\n";
					}

Changes required in edit_article.jsp #

Liferay calls the javascript function

function <portlet:namespace />saveArticle(cmd) {

before saving any article. So we would need to override this function and call a validation function before submitting the form.

Sample Validation Function -

function trim(str) {
    return str.replace(/^\s+|\s+$/g,"");
}

function validateArticleContent(portletNameSpace)
{
	var flag = "true";
	for (i = 0; i >= 0; i++) {
				var elDepth = document.getElementById(portletNameSpace+"structure_el" + i + "_depth");
				var elName = document.getElementById(portletNameSpace+"structure_el" + i + "_name");
				var elType = document.getElementById(portletNameSpace+"structure_el" + i + "_type");
				var elValidate = document.getElementById(portletNameSpace+"structure_el" + i + "_validate");
				var elContent = document.getElementById(portletNameSpace+"structure_el" + i + "_content");
				var elLanguage = document.getElementById(portletNameSpace+"structure_el" + i + "_localized");

				if (elDepth != null && elName != null && elType != null) {
					var elDepthValue = elDepth.value;
					var elNameValue = elName.value;
					var elTypeValue = elType.value;
					var elValidateValue = elValidate.value;
					var elContentValue = "";
					var elLanguageValue = elLanguage.value;
					

					if (elTypeValue == "text" || elTypeValue == "text_box" || elTypeValue == "image_gallery" || elTypeValue == "document_library" || elTypeValue == "link_to_layout") {
						
						elContentValue = elContent.value;
						elContentValue = "<![CDATA[" + elContentValue + "]]>";
						
						if(elValidateValue == "mandatory")
						{
							if(trim(elContent.value) == ""){
								alert('Please enter valid '+elNameValue+' value.');								
								flag ="false";
								break;
							}
						}

					}
				}
				else
				{
					break;
				}
	}
	
	return flag == "true";
}

This concludes the example: other kinds of validation can be added in a similar fashion.

0 Attachments
66140 Views
Average (1 Vote)
The average rating is 5.0 stars out of 5.
Comments
Threaded Replies Author Date
for More on Liferay ... Rohit Salecha May 9, 2011 11:53 PM
Hi, I tried above example on Liferay 6.1. But... Padmajeet Mhaske April 10, 2012 9:18 AM
Hi, i have a problem. I have to make required... Enrico Maria Rossi February 8, 2013 3:09 AM
Categorization fild in a new creation of ... Enrico Maria Rossi February 8, 2013 3:12 AM
How do we do the same for Liferay 6.2? Asking... Bimal Patel January 8, 2014 11:31 PM

for More on Liferay

http://liferaydemystified.blogspot.com/
Posted on 5/9/11 11:53 PM.
Hi,

I tried above example on Liferay 6.1. But it seems that structure for "edit_article.jsp" is changed.
I have manged to get workaround for other files but failing to do same with "edit_article.jsp".

Can you please provide me how get all elements name inside java-script functions?


Regards,
Padmajeet
Posted on 4/10/12 9:18 AM.
Hi,
i have a problem. I have to make required the categorization filed. How can i do it? Thanks.

Regards,
Enrico
Posted on 2/8/13 3:09 AM.
Categorization fild in a new creation of webcontent emoticon
Posted on 2/8/13 3:12 AM in reply to Enrico Maria Rossi.
How do we do the same for Liferay 6.2? Asking since many components are changed in Liferay 6.2 and these files are not found anymore, esp. *xsd*.jsp.
Posted on 1/8/14 11:31 PM.