Liferay 7.3.5环境下如何实现AUI表单校验后再通过AJAX提交数据

调整方案 #

第一步：修改提交按钮类型 #

把你原来的按钮代码里的type="button"改成type="submit"，让按钮可以触发表单默认的提交流程：

<aui:button id="button-contactForm" name="button" type="submit" value="form.button.send" />

第二步：替换表单提交事件逻辑 #

把原来监听按钮点击的JS代码，替换成监听表单submit事件，先触发AUI校验再执行AJAX提交：

// 把原来的$('#<portlet:namespace/>button-contactForm').click(...) 替换成以下代码
$('#<portlet:namespace/>fm').on('submit', function(e) {
    // 阻止表单默认提交刷新页面的行为
    e.preventDefault();

    // 获取Liferay表单校验实例
    const formInstance = Liferay.Form.get('<portlet:namespace/>fm');
    const validator = formInstance.getFormValidator();

    // 执行全表单校验
    if (validator.validate()) {
        // 校验通过，执行AJAX提交逻辑
        const data = new FormData(this);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: '${emailResourceURL}',
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000
        }).done(function( data, textStatus, jqXHR ) {
            $('#<portlet:namespace/>fm').trigger('reset');
            console.log("La solicitud se ha completado correctamente.");
        }).fail(function( jqXHR, textStatus, errorThrown ) {
            console.log("La solicitud ha fallado: " +  textStatus);
        });
    }
    // 校验不通过时AUI会自动展示各字段的错误提示，无需额外处理
});

额外说明 #

• 你配置在<aui:validator>里的所有规则（必填、邮箱格式、数字、文件类型、单选按钮必填）都会被自动校验，和普通表单提交的错误提示表现完全一致
• 验证码默认是服务端校验，需要你在资源接口里校验验证码正确性后，在返回结果里添加错误标识，前端收到后单独展示验证码错误提示
• 如果遇到Liferay.Form.get返回空的情况，确认表单的name属性值和你传入的参数一致，且没有遗漏<portlet:namespace/>前缀

内容的提问来源于stack exchange，提问作者Dimas Travieso