Che cos'è la convalida discreta di jQuery?

So cos'è il plug-in di convalida jQuery. So che la libreria di convalida discreta jQuery è stata creata da Microsoft ed è inclusa nel framework MVC ASP.NET. Ma non riesco a trovare un'unica fonte online che spieghi di cosa si tratta. Qual è la differenza tra la libreria standard di convalida jQuery e la versione "discreta"?

Brad Wilson ha un paio di fantastici articoli sulla validazione discreta e sull'ajax discreto .
È anche mostrato molto bene in questo video Pluralsight nella sezione "AJAX e JavaScript".

Fondamentalmente, è semplicemente la convalida Javascript che non inquina il codice sorgente con il proprio codice di convalida . Questo viene fatto usando gli data-attributi in HTML.

Con il modo discreto:

• Non è necessario chiamare il metodo validate ().
• Specificare i requisiti utilizzando gli attributi dei dati (data-val, data-val-richiesto, ecc.)

Esempio di convalida di Jquery :

<input type="text" name="email" class="required">
<script>
        $(function () {
            $("form").validate();
        });
</script>

Jquery convalida l'esempio discreto :

<input type="text" name="email" data-val="true" 
data-val-required="This field is required.">  

<div class="validation-summary-valid" data-valmsg-summary="true">
    <ul><li style="display:none"></li></ul>
</div>

Per un chiarimento, ecco un esempio più dettagliato che dimostra la convalida del modulo usando jQuery Validation discreto.

Entrambi utilizzano il seguente JavaScript con jQuery:

  $("#commentForm").validate({
    submitHandler: function(form) {
      // some other code
      // maybe disabling submit button
      // then:
      alert("This is a valid form!");
//      form.submit();
    }
  });

Le principali differenze tra i due plugin sono gli attributi utilizzati per ciascun approccio.

Convalida jQuery

Usa semplicemente i seguenti attributi:

• Impostare richiesto se richiesto
• Imposta il tipo per una formattazione corretta (e-mail, ecc.)
• Imposta altri attributi come dimensione (lunghezza minima, ecc.)

Ecco il modulo ...

<form id="commentForm">
  <label for="form-name">Name (required, at least 2 characters)</label>
  <input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>
  <input type="submit" value="Submit">
</form>

Convalida jQuery discreta

Sono necessari i seguenti attributi di dati:

• data-msg-required = "Questo è richiesto."
• Dati-regola-required = "true / false"

Ecco il modulo ...

<form id="commentForm">
  <label for="form-x-name">Name (required, at least 2 characters)</label>
  <input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">
  <input type="submit" value="Submit">
</form>

Sulla base di uno di questi esempi, se i campi del modulo richiesti sono stati compilati e soddisfano i criteri di attributo aggiuntivi, verrà visualizzato un messaggio che notifica che tutti i campi del modulo sono convalidati. Altrimenti, ci sarà del testo vicino ai campi del modulo offensivo che indica l'errore.

Riferimenti: - Convalida jQuery: https://jqueryvalidation.org/documentation/

jQuery Validation Unobtrusive Native è una raccolta di estensioni helper HTML ASP.Net MVC. Questi fanno uso del supporto nativo di jQuery Validation per la validazione guidata da attributi di dati HTML 5. Microsoft ha restituito jquery.validate.unobtrusive.js con MVC 3. Ha fornito un modo per applicare le convalide del modello di dati sul lato client utilizzando una combinazione di jQuery Validation e attributi di dati HTML 5 (questa è la parte "discreta").