java - 如何在liferay中通过ajax提交表单之前检查错误

Question

我创建了一个以年龄作为字段名的表单，并检查它是否为数字。但是表单已成功提交，显示 ajax 响应，之后显示错误。当名为“age”的表单字段中有错误时，我不希望提交表单。那么如何防止这种情况发生。我的代码如下:-

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="theme" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<theme:defineObjects/>
<portlet:defineObjects />
<portlet:resourceURL var="resourceURL"/>
<script type="text/javascript">
function callServeResource(){
    AUI().use('aui-io-request', function(A){
        A.io.request('<%=resourceURL.toString()%>', {
               method: 'post',
               form: {
                   id: 'fm'
               },
               on: {
                   success: function() {
                    alert(this.get('responseData'));
                   }
              }
            });
    });
}

AUI().use(
        'aui-form-validator',
        function(A) {
            new A.FormValidator(
                {
                    boundingBox: '#fm',
                    rules: {
                        age:
                        {
                            number:true
                        }
                    }
                }
            )
        }
    ); 
</script>
<form name="fm" id="fm">
Full Name:<input type="text" name="fullName"/>
<br/>
Age:<input type="text" name="age"/>
<br/>
<input type="button" value="Submit Form Data" onclick="callServeResource()">
</form>

Answer 1

试试这个。在 A.io.request 之前执行此触发表单验证的代码。如果验证错误，请退出函数或执行您想要的操作。此代码存在于核心 portlet.js 中。

    var form = A.one(formSelector)

    var liferayForm = Liferay.Form.get(form.attr('id'));

    if (liferayForm) {
        var validator = liferayForm.formValidator;

        if (A.instanceOf(validator, A.FormValidator)) {
            validator.validate();

            hasErrors = validator.hasErrors();

            if (hasErrors) {
                validator.focusInvalidField();

                return;
            }
        }
    }