Estoy desarrollando un formulario en Liferay 7.3.5. El propósito del formulario es validar los datos antes de enviarlos AJAX a los recursos.

El código funciona bien, el problema que tengo es que no encuentro la solución para validar los campos del formulario antes de enviar los datos por AJAX. El fragmento de código AJAX es el siguiente

 //Evento boton de formulario $('#<portlet:namespace/>button-contactForm').click(function(){ var form = $('#<portlet:namespace/>fm')[0]; var data = new FormData(form); $.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); }); });

¿Cómo puedo validar los campos del formulario en este caso? Te mostré el código completo, a continuación.

 <%@ include file="/init.jsp" %> <portlet:resourceURL id="email" var="emailResourceURL"/> <portlet:resourceURL id="captcha" var="captchaResourceURL"/> <div id="contactForm"> <div class="content-width-section"> <aui:form name="fm" method="post" enctype="multipart/form-data"> <aui:fieldset-group markupView="lexicon"> <aui:fieldset label="form.field.title"> <aui:input id="subject-contactForm" placeholder="form.field.subject" label="" name="${subject}" type="text"> <aui:validator name="required"></aui:validator> </aui:input> <aui:row> <aui:col width="50"> <aui:input id="name-contactForm" placeholder="form.field.name" label="" name="${name}" type="text"> <aui:validator name="required"></aui:validator> </aui:input> </aui:col> <aui:col width="50"> <aui:input id="surname-contactForm" placeholder="form.field.surname" label="" name="${surname}" type="text"> <aui:validator name="required"></aui:validator> </aui:input> </aui:col> </aui:row> <aui:row> <aui:col width="50"> <aui:input id="email-contactForm" placeholder="form.field.email" label="" name="${email}" type="text"> <aui:validator name="required"></aui:validator> <aui:validator name="email"></aui:validator> </aui:input> </aui:col> <aui:col width="50"> <aui:input id="phone-contactForm" placeholder="form.field.phone" label="" name="${phone}" type="text"> <aui:validator name="digits"></aui:validator> </aui:input> </aui:col> </aui:row> <aui:input id="message-contactForm" placeholder="form.field.message" label="" name="${message}" type="textarea"> <aui:validator name="required"></aui:validator> </aui:input> <div class="input-group"> <div class="input-file-upload col-xs-12 col-sm-8 col-md-9 col-lg-10"> <aui:input id="fileName-contactForm" placeholder="form.field.attached.document" label="" name="${fileName}" type="text" /> </div> <div class="btn-file-upload col-xs-12 col-sm-4 col-md-3 col-lg-2"> <aui:input id="attachedDocument-contactForm" label="form.button.attached.document" name="${attachedDocument}" type="file" > <aui:validator name="acceptFiles">'doc,docx,pdf'</aui:validator> </aui:input> </div> </div> <aui:input name="form.field.privacy.policy" type="radio"> <aui:validator name="required"></aui:validator> </aui:input> <liferay-captcha:captcha url="${captchaResourceURL}" /> </aui:fieldset> </aui:fieldset-group> <aui:button-row> <aui:button id="button-contactForm" name="button" type="button" value="form.button.send" /> </aui:button-row> </aui:form> </div> </div> <script> //Bordes y titulo del formulario $('#contactForm .main-content-card').removeClass('card-horizontal'); $('#contactForm #Title').addClass('h2 title-section text-center my-4'); //Boton seleccion de documento adjunto // $('#contactForm .input-group .input-file-upload input').attr('disabled', ''); $('#contactForm .input-group .btn-file-upload label').addClass('buttonBlue mayusculas p-2 d-flex justify-content-center'); //Radio button 'politica de privacidad' $('#contactForm .radio').addClass('textGraySade'); $('#contactForm .radio.textGraySade label').addClass('d-flex align-items-center'); //Boton de envio de formulario $('#contactForm button').removeClass('btn-primary btn-secondary').addClass('buttonBlue mayusculas'); $('#contactForm .button-holder').addClass('d-flex justify-content-center'); $(document).ready(function(){ //Evento boton seleccion de documento adjunto $('#contactForm .btn-file-upload input:file').change(function(){ var pathFile = $(this).val(); var indexToken = pathFile.lastIndexOf('\\') + 1; var fileName = pathFile.substring(indexToken, pathFile.length); $('#contactForm .input-file-upload input:text').val(""); $('#contactForm .input-file-upload input:text').val(fileName); }); //Evento campo de texto de documento adjunto $('#contactForm .input-file-upload input:text').click(function(){ $(this).val(''); $('#contactForm .btn-file-upload input:file').val(''); }); //Evento boton de formulario $('#<portlet:namespace/>button-contactForm').click(function(){ var form = $('#<portlet:namespace/>fm')[0]; var data = new FormData(form); $.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); }); }); }); </script>

¡Gracias!

¡Saludos!