javascript - validacion - ¿Cómo se activa manualmente la validación con jQuery?

validar nombre javascript

Question

Deseo activar manualmente la validación, que incluye mostrar los mensajes de error con jQuery Validate .

El escenario que intento lograr es una forma como esta:

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

Al hacer clic en b1 , solo se debe validar i1 . Al hacer clic en b2 , solo se debe validar i2 . 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

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

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

Answer 2

En mi caso similar, 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''
  });
});

Answer 3

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

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

Ejemplos aquí:

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

Answer 4

Hay un método no documentado a 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 5

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

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

Documentación: Validator.element()

Answer 6

Lo intenté. Tnx @Anastasiosyal lo quiero compartir 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 de forma individual utilizando:

$(".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 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; }
.....
}

Answer 7

Mi enfoque fue el siguiente. Ahora solo quería que mi formulario fuera validado cuando se hacía clic / cambiar una casilla de verificación específica:

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

Answer 8

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
}