¿Cómo activar manualmente la validación con jQuery validate?

Quiero activar manualmente la validación, incluida la visualización de mensajes de error con jQuery Validate .

El escenario que estoy tratando de lograr es una forma como esta:

<form>
 <input id=i1> <button id=b1>
 <input id=i2> <button id=b2>
</form>

Al hacer clic b1, solo i1debe validarse. Al hacer clic b2, solo i2debe validarse. Sin embargo, todos los campos deben ser publicados. ¿Cómo puedo hacer esto? Pensé en manejar el evento click b1/b2y validar manualmente una parte del formulario.

Esa biblioteca parece permitir la validación de elementos individuales. Simplemente asocie un evento de clic a su botón e intente lo siguiente:

$("#myform").validate().element("#i1");

Ejemplos aquí:

https://jqueryvalidation.org/Validator.element

O simplemente puede usar: $('#myElem').valid()

if ($('#myElem').valid()){
   // will also trigger unobtrusive validation only for this element if in place 
   // add your extra logic here to execute only when element is valid
}

Tenga en cuenta que validate() debe llamarse en el formulario antes de verificarlo con este método.

Enlace de documentación: https://jqueryvalidation.org/valid/

Mi enfoque fue el siguiente. Ahora solo quería que mi formulario se validara cuando se hizo clic / cambió una casilla de verificación específica:

$('#myForm input:checkbox[name=yourChkBxName]').click(
 function(e){
  $("#myForm").valid();
}
)

Como está escrito en la documentación , la forma de activar la validación de formularios mediante programación es invocar validator.form ()

var validator = $( "#myform" ).validate();
validator.form();

Existe un método no documentado a partir de la versión 1.14

validator.checkForm()

Este método valida en silencio para devolver verdadero / falso. No activa mensajes de error.

Eva M desde arriba, casi tenía la respuesta como se publicó anteriormente (¡Gracias Eva M!):

var validator = $( "#myform" ).validate();
validator.form();

Esta es casi la respuesta, pero causa problemas, incluso en el complemento de validación jquery más actualizado al 13 de diciembre de 2018. El problema es que si uno copia directamente esa muestra y NUNCA llama ".validate ()" más de una vez , el procesamiento de foco / clave de la validación puede romperse y la validación puede no mostrar los errores correctamente.

Aquí se explica cómo usar la respuesta de Eva M y asegurarse de que no ocurran esos problemas de enfoque / clave / ocultación de errores:

1) Guarde su validador en una variable / global.

var oValidator = $("#myform").validate();

2) NO llame a $ ("# myform"). Validate () NUNCA más.

Si llama a $ ("# myform"). Validate () más de una vez, puede causar problemas de enfoque / clave / ocultación de errores.

3) Use la variable / global y el formulario de llamada.

var bIsValid = oValidator.form();

En mi caso similar, tenía mi propia lógica de validación y solo quería usar la validación jQuery para mostrar el mensaje. Esto fue lo que hice.

//1) Enable jQuery validation
var validator = $('#myForm').validate();

$('#myButton').click(function(){
  //my own validation logic here
  //.....
  //2) when validation failed, show the error message manually
  validator.showErrors({
    'myField': 'my custom error message'
  });
});

Lo intenté funcionó tnx @Anastasiosyal Quiero compartirlo en este hilo.

No estoy seguro de cómo los campos de entrada no se activaron cuando vacié los campos. Pero logré activar cada campo requerido individualmente usando:

$(".setting-p input").bind("change", function () {
        //Seven.NetOps.validateSettings(Seven.NetOps.saveSettings);
        /*$.validator.unobtrusive.parse($('#saveForm'));*/
        $('#NodeZoomLevel').valid();
        $('#ZoomLevel').valid();
        $('#CenterLatitude').valid();
        $('#CenterLongitude').valid();
        $('#NodeIconSize').valid();
        $('#SaveDashboard').valid();
        $('#AutoRefresh').valid();
    });

aquí está mi punto de vista

@using (Html.BeginForm("SaveSettings", "Settings", FormMethod.Post, new {id = "saveForm"}))
{
    <div id="sevenRightBody">
        <div id="mapMenuitemPanel" class="setingsPanelStyle" style="display: block;">
            <div class="defaultpanelTitleStyle">Map Settings</div>
            Customize the map view upon initial navigation to the map view page.
            <p class="setting-p">@Html.LabelFor(x => x.NodeZoomLevel)</p>
            <p class="setting-p">@Html.EditorFor(x => x.NodeZoomLevel) @Html.ValidationMessageFor(x => x.NodeZoomLevel)</p>
            <p class="setting-p">@Html.LabelFor(x => x.ZoomLevel)</p>
            <p class="setting-p">@Html.EditorFor(x => x.ZoomLevel) @Html.ValidationMessageFor(x => x.ZoomLevel)</p>
            <p class="setting-p">@Html.LabelFor(x => x.CenterLatitude)</p>
            <p class="setting-p">@Html.EditorFor(x => x.CenterLatitude) @Html.ValidationMessageFor(x => x.CenterLatitude)</p>
            <p class="setting-p">@Html.LabelFor(x => x.CenterLongitude)</p>
            <p class="setting-p">@Html.EditorFor(x => x.CenterLongitude) @Html.ValidationMessageFor(x => x.CenterLongitude)</p>
            <p class="setting-p">@Html.LabelFor(x => x.NodeIconSize)</p>
            <p class="setting-p">@Html.SliderSelectFor(x => x.NodeIconSize) @Html.ValidationMessageFor(x => x.NodeIconSize)</p>
        </div>

y mi entidad

   public class UserSetting : IEquatable<UserSetting>
    {
        [Required(ErrorMessage = "Missing Node Zoom Level.")]
        [Range(200, 10000000, ErrorMessage = "Node Zoom Level must be between {1} and {2}.")]
        [DefaultValue(100000)]
        [Display(Name = "Node Zoom Level")]
        public double NodeZoomLevel { get; set; }

        [Required(ErrorMessage = "Missing Zoom Level.")]
        [Range(200, 10000000, ErrorMessage = "Zoom Level must be between {1} and {2}.")]
        [DefaultValue(1000000)]
        [Display(Name = "Zoom Level")]
        public double ZoomLevel { get; set; }

        [Range(-90, 90, ErrorMessage = "Latitude degrees must be between {1} and {2}.")]
        [Required(ErrorMessage = "Missing Latitude.")]
        [DefaultValue(-200)]
        [Display(Name = "Latitude")]
        public double CenterLatitude { get; set; }

        [Range(-180, 180, ErrorMessage = "Longitude degrees must be between {1} and {2}.")]
        [Required(ErrorMessage = "Missing Longitude.")]
        [DefaultValue(-200)]
        [Display(Name = "Longitude")]
        public double CenterLongitude { get; set; }

        [Display(Name = "Save Dashboard")]
        public bool SaveDashboard { get; set; }
.....
}

Hay una buena manera si usa validate()parámetros en un formulario y luego desea validar manualmente un campo de su formulario:

var validationManager = $('.myForm').validate(myParameters);
...
validationManager.element($(this));

Documentación: Validator.element ()