Come attivare manualmente la convalida con jQuery validate?

Voglio innescare manualmente la convalida inclusa la visualizzazione di messaggi di errore con jQuery Validate .

Lo scenario che sto cercando di realizzare è un modulo come questo:

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

Quando si fa clic b1, è i1necessario solo convalidare. quando si fa clic b2, solo i2deve essere convalidato. Tuttavia, tutti i campi devono essere registrati. Come posso fare questo? Ho pensato di gestire l'evento click b1/b2e di convalidare manualmente una parte del modulo.

Quella libreria sembra consentire la validazione per singoli elementi. Basta associare un evento click al tuo pulsante e provare quanto segue:

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

Esempi qui:

https://jqueryvalidation.org/Validator.element

Oppure si può semplicemente usare: $('#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
}

Si noti che validate()deve essere chiamato sul modulo prima di verificarlo utilizzando questo metodo.

Link alla documentazione: https://jqueryvalidation.org/valid/

Il mio approccio era il seguente. Ora volevo solo che il mio modulo fosse convalidato quando una casella specifica era stata selezionata / modificata:

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

Come scritto nella documentazione , il modo per attivare la convalida del modulo a livello di codice è invocare validator.form ()

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

Esiste un metodo non documentato a partire dalla versione 1.14

validator.checkForm()

Questo metodo convalida silenziosamente per restituire true / false. Non attiva messaggi di errore.

Eva M dall'alto, quasi avuto la risposta come pubblicato sopra (Grazie Eva M!):

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

Questa è quasi la risposta, ma causa problemi, anche nel plugin di validazione jquery più aggiornato al 13 DIC 2018. Il problema è che se uno copia direttamente quel campione ed EVER chiama ".validate ()" più di una volta , l'elaborazione focus / chiave della convalida può essere interrotta e la convalida potrebbe non mostrare correttamente gli errori.

Ecco come utilizzare la risposta di Eva M e assicurarsi che non si verifichino quei problemi relativi a focus / chiave / occultamento errori:

1) Salva il tuo validatore in una variabile / globale.

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

2) NON chiamare $ ("# myform"). Validate () MAI di nuovo.

Se si chiama $ ("# myform"). Validate () più di una volta, si potrebbero verificare problemi di attivazione / chiave / occultamento degli errori.

3) Utilizzare la variabile / globale e il modulo di chiamata.

var bIsValid = oValidator.form();

Nel mio caso simile, avevo la mia logica di convalida e volevo solo usare la convalida jQuery per mostrare il messaggio. Questo è quello che ho fatto.

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

ho provato ha funzionato tnx @Anastasiosyal voglio condividerlo su questo thread.

Non sono sicuro di come i campi di input non si siano attivati ​​quando ho svuotato i campi. Ma sono riuscito a innescare individualmente ogni campo richiesto 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();
    });

ecco il mio punto di 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>

e la mia entità

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

C'è un buon modo se si utilizza validate()con i parametri in un modulo e si desidera convalidare manualmente un campo del modulo in seguito:

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

Documentazione: Validator.element ()