AUI validation of fields not working when AJAX through load

[Vishal Shah，修改在7 年前。]

I have issue in AUI validator, when some AUI form fields load via AJAX. This is just sample code this kind of scenario comes in real application so I need help for this.

DOM is not to reset for fields, which are comes via AJAX so Script in not loaded.

Code :

View.jsp

<%@ include file="init.jsp"%>
<%@page import="com.liferay.portal.kernel.servlet.SessionMessages"%>
<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<%@page import="javax.portlet.ActionRequest"%>
<%@ include file="init.jsp"%>
<portlet:actionurl var="sendMessageActionURL" windowstate="<%=LiferayWindowState.NORMAL.toString()%>">
<portlet:param name="<%=ActionRequest.ACTION_NAME%>" value="sendMessage" />
<portlet:param name="name" value="test" />
</portlet:actionurl>
<h1>Sending mail notification to all portal users....</h1>

<liferay-portlet:resourceurl id="dependentQuestionUrl" var="getDependentQuestionUrl">
			<portlet:param name="cmd" value="mail" />
		</liferay-portlet:resourceurl>
		<fieldset>
    <legend>Mail Form</legend>
<c:if test="<%= SessionMessages.contains(renderRequest.getPortletSession(),&quot;bulk-mails-sending-success&quot;)%>">
	<liferay-ui:success key="bulk-mails-sending-success" message="Mails are sending.Plse see the console for back end operation..." />
</c:if>
<aui:form action="<%=sendMessageActionURL%>" method="post" name="mailSenderForm">

<aui:input label="Sender Mail Address" name="senderEmailAddess" id="senderEmailAddess" type="text" style="width:250px;height:30px;">
			<aui:validator name="required" />
		</aui:input>

<div id="<portlet:namespace/>ajax">

</div>
<aui:button type="submit" value="Send Bulk Mails" name="submit"></aui:button>
</aui:form>
</fieldset>
<script>
		AUI().ready('aui-base','aui-io-request','aui-node', 'liferay-form', function(A){
			A.io.request('<%=getDependentQuestionUrl%>',
	                {
	            method :'POST',
	            data: {

	            	},
	            dataType: 'json',
	            on:{
	            	start:function(){
	            		A.one('#<portlet:namespace/>ajax').setHTML(A.Node.create('<div class="loading-animation"  />'));
	            	},
	            	failure: function() {
	            	},
	                success: function(){
	                    var message = this.get('responseData');
	                    var nodeAjax = A.one('#<portlet:namespace/>ajax');
	                    if(nodeAjax !=null){
	                    	A.one('#<portlet:namespace/>ajax').html(message);
		                    $('#<portlet:namespace/>ajax').find("script").each(function(i) {
		                        eval($(this).text());
		                    });
	                    }
	                    
	                }
	            }
	    	});
			
			/******** Default Seleted ********/
			
		});
		</script>

mail.jsp

<%@ include file="init.jsp"%>

		<aui:input label="Mail Subject" name="mailSubject" id="mailSubject" type="text" width="250">
			<aui:validator name="required" />
		</aui:input>

		<aui:input label="Mail Body" name="mailBody" id="mailBody" type="textarea" width="250">
			<aui:validator name="required" />
		</aui:input>

Portlet Controller Code :

@Override
	public void serveResource(ResourceRequest resourceRequest,
			ResourceResponse resourceResponse) throws IOException,
			PortletException {
		String cmd = ParamUtil.getString(resourceRequest, "cmd");
		if(cmd.equalsIgnoreCase("mail")){
			include("/html/bulkmailsend/mail.jsp", resourceRequest,
					resourceResponse, PortletRequest.RESOURCE_PHASE);
		}
		super.serveResource(resourceRequest, resourceResponse);
	}

[Byrån Zaugg，修改在7 年前。]

All <aui:validator> are collected on the server-side and processes together per request, per <aui:form>.

Because your AJAX <aui:validator> comes in on a separate request, the original <aui:form>, the server has no idea what to do with the <aui:validator> in your AJAX request.

You'll need to manually add your new fieldRules to the Form.

Use something like below:

	<aui:script use="liferay-form">
		var myForm = Liferay.Form.get('<portlet:namespace />fm');
		var fieldRules = myForm.get('fieldRules');

		var addrules = [
			{
				fieldName: '<portlet:namespace />ageSelect',
				validatorName: 'required'
			}
		];

		fieldRules = fieldRules.concat(addrules);
		fieldRules = A.Array.unique(fieldRules);

		myForm.set('fieldRules', fieldRules);
	</aui:script>

Something like the above should allow you to dynamically add field to validate.