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.