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


143

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.


¿Por qué no validarlo manualmente? Este complemento es muy útil para validar el formulario completo, pero en este caso validar el formulario manualmente.
Anatoliy

La forma es más grande que en mi ejemplo. Lo quiero automatizado.
Usr

Respuestas:


176

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


15
Esto valida todo el formulario ... para validar solo 1 campo, la forma correcta es esta: stackoverflow.com/a/12195091/114029
Leniel Maccaferri

Por alguna razón, no obtengo el texto de error personalizado cuando valido de esta manera. Puede tener algo que ver con el hecho de que me estoy ejecutando dentro de un cuadro de diálogo Durandal. Tener toneladas de problemas con este marco en dicho contexto.
P.Brian.Mackey

@Roberto Aloi: El enlace está en desuso
Sebastian

@Sebastian ¡Gracias por el ping, actualicé el enlace ahora!
Roberto Aloi

113

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/


15
validate()necesita ser llamado en el formulario antes de verificarlo usando este método.
GETah

Tengo una consulta como esta si ($ ('# myElem'). val () == '2017-4-12') {selección de fecha incorrecta} más {selección válida}
srinivas gowda

29

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();
}
)

Mi consulta if ($ ('# someID) ===' 2017-4-12) {$ ("# myform"). Validate (). Element ("# i1"). Valid ();} else {$ ( "#myform"). validate (). element ("# i1"). invalid ();} es el código correcto
srinivas gowda

14

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();

2
Esto no responde la pregunta, ya que se trata de validar solo un campo específico. Pero es exactamente lo que estaba buscando. ¡Gracias!
jlh

4

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.


9
indocumentado = podría romperse en cualquier momento.
Usr

2

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();

1

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'
  });
});


0

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; }
.....
}

3
Esta respuesta supone un entorno .Net cuando la pregunta se refiere explícitamente a la validación de jQuery.
Kenogu Labz

0

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 ()

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.