Che cos'è jQuery Convalida discreta?

Question

So cosa è il plugin di convalida jQuery. So che la libreria jQuery Unobtrusive Validation è stata creata da Microsoft ed è inclusa nel framework MVC di ASP.NET. Ma non riesco a trovare una singola fonte online che spieghi di cosa si tratta. Qual è la differenza tra la libreria di convalida jQuery standard e la versione "non invadente"?

Answer 1

Brad Wilson ha un paio di fantastici articoli su unobtrusive validation e unobtrusive ajax.
Viene anche mostrato molto bene in questo Pluralsight video nella sezione "AJAX e JavaScript".

In sostanza, si tratta semplicemente di convalida JavaScript che non inquina il codice sorgente di con il proprio validazione del codice. Questo viene fatto usando gli attributi data- in HTML.

Answer 2

Con il modo discreto:

• Non c'è bisogno di chiamare il metodo validate().
• Si specifica esigenze utilizzando gli attributi di dati (data-val, data-val-required, ecc)

Jquery Convalida Esempio:

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

Jquery Convalida discreto Esempio:

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

Answer 3

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

Answer 4

Per chiarimenti, ecco un esempio più dettagliato che dimostra la convalida del modulo utilizzando jQuery Validation Unobtrusive.

Entrambi utilizzano la 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 ogni approccio.

jQuery convalida

sufficiente utilizzare i seguenti attributi:

• set richiesto se necessario
• tipo Set per la formattazione corretta (e-mail, etc.)
• Impostare le altre caratteristiche come ad esempio 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> 

jQuery convalida discreto

sono necessari i seguenti attributi di dati:

• dati-msg-required = "Ciò è necessario"
• 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 sono stati riempiti i campi del modulo che sono necessari e soddisfano i criteri degli attributi aggiuntivi, quindi viene visualizzato un messaggio che notifica che tutti i campi modulo sono convalidati. In caso contrario, sarà presente del testo vicino ai campi del modulo in questione che indica l'errore.

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