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

Question

Deseo activar manualmente la validación, que incluye mostrar 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, solamente i1 debe ser validada. Al hacer clic en b2, solo i2 debe validarse. Sin embargo, todos los campos deben publicarse. ¿Cómo puedo hacer esto? Pensé en manejar el evento click para b1/b2 y validar manualmente una parte del formulario.

Answer 1

Esa biblioteca parece permitir la validación de elementos individuales. Sólo asociar un evento de clic al botón y aplica los siguientes:

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

ejemplos aquí:

http://docs.jquery.com/Plugins/Validation/Validator/element#element

Answer 2

Mi enfoque era la siguiente manera. Ahora sólo quería mi forma de ser validada cuando se hace clic en una casilla específica/cambiado:

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

Answer 3

O uno puede simplemente 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 
} 

Answer 4

lo probé funcionó TNX @Anastasiosyal quiero compartir en este hilo.

No estoy seguro de cómo los campos de entrada no se activaron cuando vacié los campos. Pero me las arreglé para 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í es mi opinión

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

Answer 5

Existe un método indocumentado partir de la versión 1.14

validator.checkForm() 

Este método valida silenciosamente el retorno verdadero/falso. No activa los mensajes de error.

Answer 6

No es una buena manera si utiliza validate() con parámetros en un formulario y desea validar un campo de su formulario de forma manual después:

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

Documentación: Validator.element()

Answer 7

En mi caso similar, yo tenía mi propia lógica de validación y solo quería usar la validación de 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' 
 
    }); 
 
});