¿Cómo activo la validación del formulario predeterminado sin enviar el formulario?

Estoy personalizando el NewForm de un elemento de la lista y necesito activar la validación del formulario predeterminado desde mi JavaScript, pero no quiero que se envíe el formulario, ya que lo haré en una devolución de llamada más adelante.

¿Es posible hacerlo? He intentado buscar en el SPClientFormsobjeto y, en particular, SPClientForms.ClientValidationy SPClientForms.ClientFormManagerpero no puedo averiguar si puedo activarlo.

Hay al menos dos opciones disponibles cuando se trata de la validación del lado del cliente en SharePoint 2013:

• Validación de la representación del lado del cliente (CSR)
• Anular el controlador de guardado mediante la PreSaveActionfunción

Suponga el escenario en el que necesitamos agregar la validación del lado del cliente para la Emailcolumna de la Contactslista.

Validación de la representación del lado del cliente (CSR) en SharePoint 2013

CSR es un modo de representación predeterminado en SharePoint 2013. El SPClientForms.ClientValidationespacio de nombres contiene la API de validación e incluye archivos comunes. A continuación se muestra cómo anular la validación del cliente de campo de texto predeterminado y agregar un validador personalizado para el campo de correo electrónico:

CustomClientValidation = {};
CustomClientValidation.EmailValidator = function() {
};
CustomClientValidation.EmailValidator.prototype.Validate = function(value) {
    value = SPClientTemplates.Utility.Trim(value);

    var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var hasError = !re.test(value);
    var errorMsg = hasError ? 'Invalid email address' : '';

    return new SPClientForms.ClientValidation.ValidationResult(hasError, errorMsg);
};


function EmailField_Edit(rCtx) {
    if (rCtx == null)
        return '';
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(rCtx);

    if (formCtx == null || formCtx.fieldSchema == null)
        return '';

    var _value = formCtx.fieldValue != null ? formCtx.fieldValue : '';      

    if (_value.length > 0) {
        var validators = new SPClientForms.ClientValidation.ValidatorSet();
        validators.RegisterValidator(new CustomClientValidation.EmailValidator());
        formCtx.registerClientValidator(formCtx.fieldName, validators);
    }

    return SPFieldText_Edit(rCtx); //default renderer for Text field
}


(function () {
    var emailFieldCtx = {};
    emailFieldCtx.Templates = {};
    emailFieldCtx.Templates.Fields = {
        'Email': {
            'NewForm': EmailField_Edit,
            'EditForm': EmailField_Edit
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(emailFieldCtx);
})();

CustomClientValidation.js

Uso:

Especificar la ubicación del archivo JavaScript mediante la JSLinkpropiedad

Anular el controlador de guardado mediante la PreSaveActionfunción

PreSaveAction función de otra mano, permite anular el comportamiento de un botón Guardar.

A continuación se muestra cómo agregar la validación de correo electrónico para el Emailcampo:

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
} 


function PreSaveAction(){

    var email = $('[id ^=Email_][id $=TextField]');
    if (!validateEmail(email.val())) {
        var errorHtml = '<span class="ms-formvalidation"><span role="alert">Invalid email address<br></span></span>';
        email.after(errorHtml);
        return false;
    }
    return true;
};

Uso:

Se puede hacer referencia al archivo JavaScript en la página de formulario Nuevo / Editar utilizando el elemento web Editor de contenido.

Resultados

Página de formulario nuevo / editar

No puede activar la validación del formulario a través de javascript, sin embargo, puede hacer otra cosa.

Tanto en el formulario Nuevo como en el formulario Editar, el Savebotón tiene onclickqué disparador, PreSaveItem()que es una función en FORMS.js que invoca una función llamada PreSaveActionque es una función definida por el usuario, lo que significa que es una función que usted define y decide qué debe hacer. Preferiblemente colocado dentro del formulario Nuevo / Editar directamente para realizar la validación en el formulario específico.

Es manual, sí, pero al menos no es necesario vincular un evento de clic a un botón. Ya está ahí, todo lo que tienes que hacer es proporcionar la lógica.

Actualizar
Para obtener los campos correctos usando este método, puede usar la función getTagFromIdentifierAndTitle que toma 3 argumentos; Tipo ("entrada", "seleccionar", etc.), FieldType ("DateTimeFieldDate", etc., puede dejarse en blanco), Nombre para mostrar ("Título", "Mi columna", etc.)

Ejemplo:

function PreSaveAction(){
    var col = getTagFromIdentifierAndTitle('input', '', 'Title');
    if (col == '') {
        alert(col.value + " is required!");
        return false;
    }
    return true;
};

Si está utilizando SharePoint 2013 con la nueva prestación estándar (RSE) llamar al siguiente método para la validación por defecto de disparo: SPClientForms.ClientFormManager.SubmitClientForm('WPQ2').

No estoy seguro de si WPQ2es constante. Dicho sufijo se agrega a los muchos elementos en DOM, por lo que no será difícil de verificar. Por ejemplo: id="MSOZoneCell_WebPartWPQ2".

Tarde para la fiesta, encontré la siguiente solución que parece funcionar

// force PostBackRequired to true in the context, otherwise it won't work if you open it into a modal
WPQ2FormCtx.PostBackRequired=true;
// we override SPClientForms.ClientFormManager.SubmitClientForm
SPClientForms.ClientFormManager.SubmitClientForm=function(b){
  var a=SPClientForms.ClientFormManager.GetClientForm(b);
  var res = (a!=null&&a.SubmitClientForm());
  // if the form is not valid, then res===true
  if (res === true) {
    return true;
  } else {
    // Do your custom things here
    // Send the form to the server
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions($get(WPQ2FormCtx.SubmitButtonID).name, "", true, "", "", false, true));
  }
  // to make sure the form won't be submitted yet
  return true;
};

Desde https://blog.kodono.info/wordpress/2016/11/18/execute-action-before-saving-a-form-and-after-form-validation-sharepoint/

El comportamiento de SP es un poco extraño. Si cambia el valor de algún campo, el SP invoca la validación, pero no se muestra ningún mensaje. El problema es que SP tiene en el archivo clientforms.js:

this.NotifyControlEvent = function(eventName, fldName, eventArg) { ...
  case SPClientForms.FormManagerEvents.Event_OnControlValueChanged:
    UpdateAndValidateControlValue(fldName, eventArg, false);
  ...
}

function UpdateAndValidateControlValue(fName, fVal, bDisplayError) {
  ...
  ValidateControlValue(fName, fVal, bDisplayError);
}

Entonces, cuando el valor está cambiando, la función UpdateAndValidateControlValue (fldName, eventArg, false); se llama, pero no se muestra ningún mensaje de validación.

Pero cuando se envía el formulario, esta función se llama con un parámetro verdadero y se muestran mensajes de validación.

No pude inyectar este script para cambiar este comportamiento extraño.

Pero si tiene acceso a clientforms.js en el sistema de archivos, puede cambiarlo fácilmente. Para cambiar todo el comportamiento de SP, simplemente puede cambiar de falso a verdadero en la función NotifyControlEvent. Pero le recomiendo que use algún parámetro de entrada, para que pueda especificar qué campo tendrá una validación modificada.

this.NotifyControlEvent = function(eventName, fldName, eventArg) {
  ...
  case SPClientForms.FormManagerEvents.Event_OnControlValueChanged:
      //this.customFieldSettings is custom property of  SPClientForms.ClientForm, which you have to fill
      if (this.customFieldSettings !== undefined &&
          this.customFieldSettings[fldName] != undefined && 
          this.customFieldSettings[fldName].onchangeValidation == true) 
      {
          UpdateAndValidateControlValue(fldName, eventArg, true);
      } else {
          UpdateAndValidateControlValue(fldName, eventArg, false);
      }
  return;

Espero que ayude y conduzca a una solución más sencilla.