Come posso abilitare la validazione jquery su campi readonly?

Question

I ragazzi da http://jqueryvalidation.org/ hanno appena rilasciato la versione 1.13.1. Controllando sul loro sito web vedo questo sul registro delle modifiche:

CORE: * Ignora i campi di sola lettura e quelli disabilitati. (9f4ba10)

Questo è il link: https://github.com/jzaefferer/jquery-validation/commit/9f4ba10ea79b4cf59225468d6ec29911f0e53a0a

faccio uso di modelli di bootstrap e uno di loro ora utilizza tale versione. Questo mi porta un problema, uso l'attributo readonly per evitare che gli utenti digitino manualmente le date, quindi la loro unica opzione è scegliere una data dal datepicker.

Con questa modifica, il plug-in di convalida ignora gli ingressi di sola lettura contrassegnati come richiesti, qualcuno può aiutarmi a suggerire qualche correzione per 1.13.1 o versioni future? Ive ha trovato una domanda di fare il contrario: How can I disable jquery validation on readonly fields?

Answer 1

Grazie per il suggerimento Panoptik, aggiungendo readonly su focusin, e poi rimuoverlo sul focusout era il modo più pulito, milioni di grazie! Rispondo a me stesso nel caso qualcuno abbia lo stesso problema. Spero che sia d'aiuto.

$(document).on("focusin", "#someid", function() { 
    $(this).prop('readonly', true); 
}); 

$(document).on("focusout", "#someid", function() { 
    $(this).prop('readonly', false); 
}); 

Answer 2

È possibile ignorare la funzione originale "elementi", con un'implementazione che molto simile a l'implementazione originale tranne che per la movimentazione campo di sola lettura. Questa non è una soluzione elegante, ma funziona. Se si aggiorna la libreria di validazione jQuery, è necessario ricontrollare il metodo sottoposto a override.
* UpToDate * Vedere jquery-validate-1.14 changeLog: Ripristina "Ignora i campi di sola lettura e quelli disabilitati." :) :)

$.validator.prototype.elements = function() { 
    var validator = this, 
    rulesCache = {}; 

    return $(this.currentForm) 
    .find("input, select, textarea") 
    .not(":submit, :reset, :image, [disabled]") // changed from: .not(":submit, :reset, :image, [disabled], [readonly]") 
    .not(this.settings.ignore) 
    .filter(function() { 
     if (!this.name && validator.settings.debug && window.console) { 
      console.error("%o has no name assigned", this); 
     } 

     if (this.name in rulesCache || !validator.objectLength($(this).rules())) { 
      return false; 
     } 

     rulesCache[ this.name ] = true; 
     return true; 
    });   
}; 

Answer 3

Non mi piace legare agli eventi focusin/out. Richiede anche l'aggiunta di stili CSS. Il codice seguente rimuove l'attributo readonly e lo riapplica quando il modulo non è valido.

$('#form').submit(function() { 
    var children = $(this).find('input[readonly]'); 
    children.prop('readonly', false); 

    var validform = $(this).valid(); 
    if (validform) { 
     $(this).unbind('submit').submit(); 
    } else { 
     children.prop('readonly', true); 
    } 

    e.preventDefault(); 
    e.stopPropagation(); 
}) 

Answer 4

Solution con l'impostazione attributo readonly sul sparato focusin evento è buona, ma ci impone di scrivere gestori a <script> blocco (Perché? Per esempio, Firefox non supporta onfocusin attr per elementi di input).

Quindi, semplice e cross-platform soluzione a mio parere è impostato onkeydown="return false;" attributo come:

<input type="text" name="myBean.date" onkeydown="return false;">

Questo lascia elemento ammesso per la convalida e non consente di inserire qualsiasi cosa dentro.