How can I enable jquery validation on readonly fields?

Daniel Avellaneda picture Daniel Avellaneda · Nov 10, 2014 · Viewed 17.1k times · Source

Guys from http://jqueryvalidation.org/ just released version 1.13.1. Checking on their website i see this on the changelog:

CORE: * Ignore readonly as well as disabled fields. (9f4ba10)

This is the link: https://github.com/jzaefferer/jquery-validation/commit/9f4ba10ea79b4cf59225468d6ec29911f0e53a0a

I use some bootstrap templates and one of them now uses that version. That brings me a problem, i use readonly attribute to prevent users typing dates manually, so their only option is to choose a date from the datepicker.

With this change, the validation plugin ignores the readonly inputs marked as required, can anyone help me out suggesting some fix for 1.13.1, or future versions? i´ve found a question to do the opposite: How can I disable jquery validation on readonly fields?

Answer

Daniel Avellaneda picture Daniel Avellaneda · Nov 10, 2014

Thank you for you suggestion Panoptik, adding readonly on focusin, and then removing it on focusout was the cleanest way, million thanks! I answer myself in case anyone has the same problem. Hope it helps.

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

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