Come aggiungere messaggi a una classe con addClassRules

Question

Sto utilizzando jQuery Validate per convalidare una pagina con un numero elevato di righe ripetute di dati. A causa dello spazio limitato, ogni riga ha il proprio riepilogo di convalida.

Io uso addClassRules ad applicare le regole di convalida alla pagina, ma i messaggi di errore di default sono troppo generici nel sommario (ad esempio "campo è richiesto, campo è richiesto ecc)

Esempio:.

jQuery.validator.addClassRules({ 
amount: { 
    required: true, 
    range: [0, 2000000] 
}, 
comment: { 
    maxlength: 51 
}, 
owner: { 
    notFirstOption: true 
}, 
A: { 
    required: function (element) { 
     return getParentElement($(element), "tr").find(".colB input.B").val().length > 0; 
    }, 
    digits: true 
}}); 

si può richiedere messaggi personalizzati per le regole di ogni classe di convalida dei casi che sto cercando qualcosa come:?

jQuery.validator.addClassMessages({ 
    amount: { 
     required: "Amount is required", 
     range: "Amount must be between 0 and 2,000,000" 
    }, 
    comment: { 
     maxlength: "Comment may be a maximum of 51 characters" 
    }, 
    owner: { 
     notFirstOption: "Please select an owner" 
    }, 
    A: { 
     required: "A is required if B is entered", 
     digits: "A must be numeric" 
    }}); 

Grazie in anticipo per qualsiasi aiuto che ca n offerta!

Answer 1

Nella documentazione, la risposta è l'alias del metodo che si desidera chiamare e aggiungere il messaggio personalizzato.

Check the reference sotto il titolo "regole di refactoring":

// alias required to cRequired with new message 
$.validator.addMethod("cRequired", $.validator.methods.required, 
"Customer name required"); 
// alias minlength, too 
$.validator.addMethod("cMinlength", $.validator.methods.minlength, 
// leverage parameter replacement for minlength, {0} gets replaced with 2 
$.format("Customer name must have at least {0} characters")); 
// combine them both, including the parameter for minlength 
$.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 }); 

Answer 2

mi è venuta in mente una soluzione abbastanza atroce, ma spero in qualcosa di molto più pulito con un po 'più di tempo ...

In ogni caso, assegnando i messaggi attraverso i metadati jQuery sono in grado di personalizzarli per classe.

class="amount {validate: 
       {messages: 
        {required:'Amount is required', 
        range: 'Amount must be between 0 and 2,000,000', 
        digits: 'Amount must be numeric'} 
       } 
       }" 

... e così via per ciascuno dei campi nelle righe della griglia.

Guarderò all'estensione del metodo 'addClassRules' per accettare un parametro messages ma per ora funziona così.

Answer 3

Poiché tutti sono ovviamente interessati alla risposta a questo, ecco il prossimo passo nella mia ricerca di una risposta!

Ho aggiunto metodi nel plugin che consentono l'aggiunta di messaggi di classe e modificato il gestore di messaggi predefinito per selezionarli.

aggiunto prima 'customMetaMessage'

customClassMessage: function (element, method) { 
    //Get the elements class(es) 
    var classes = $(element).attr("class").split(" "); 

    //return any message associated with said class and method 
    var m = $.validator.messages[classes[0]]; 

    return m && (m.constructor == String 
     ? m 
     : m[method]); 
}, 

Nuovo testo 'defaultMessage' per includere una chiamata al metodo di cui sopra

defaultMessage: function (element, method) { 
       return this.findDefined(
       this.customMessage(element.name, method), 
       this.customMetaMessage(element, method), 
       this.customClassMessage(element, method), 
       // title is never undefined, so handle empty string as undefined 
       !this.settings.ignoreTitle && element.title || undefined, 
       $.validator.messages[method], 
       "<strong>Warning: No message defined for " + element.name + "</strong>" 
      ); 
      }, 

Aggiunto metodo di un 'addClassMessages'

 addClassMessages: function (className, messages) { 
     if (className.constructor == String) { 
      $.validator.messages[className] = messages != undefined ? messages : $.validator.messages[className]; 
     } 
     else { 
      $.extend(this.messages, className); 
     } 
    }, 

Mi rifugio Sono stato in grado di capire come collegare questi metodi aggiuntivi al di fuori del plugin ancora. Almeno non devo dichiarare i messaggi di errore nell'attributo 'class' però.

jQuery.validator.addClassMessages({ 
    amount: { 
     required: "Amount is required", 
     range: "Amount must be between 0 and 2,000,000", 
     digits: "Amount must be numeric" 
    } 
}); 

Answer 4

Prova questo:

jQuery.validator.addClassRules({ 
    amount: { 
     required: true, 
     range: [0, 2000000], 
     messages: {required: "Required field!", range: "Invalid range!"} 
    }, 
    comment: { 
     maxlength: 51, 
     messages: {maxlength: "Max 51 characters!"} 
    } 
}) 

penso che è quello che stai cercando, giusto?

Answer 5

Questo può essere fatto utilizzando sottostante Codice,

$.validator.messages.accept = 'File must be JPG, GIF or PNG'; 

    $.validator.addClassRules("files", {    
     accept : "png|jpe?g|gif", 
     filesize : 2000000 
    }); 

Answer 6

Usa dati-msg-required = "Messaggio di errore qui" con l'elemento che ti piace fare validazione

<select name="account1" data-msg-required="Please select an account"> 
<option value="">--Select Account--</option> 
<optgroup label="100-Assets"> 
    <option value="1">A</option> 
    <option value="2">B</option> 
    <option value="3">C</option> 
    <option value="4">D</option> 
</optgroup>