How can I enable jquery validation on readonly fields?

Question

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 disabl

Answer 1

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); 
});

Answer 2

Solution with setting readonly attribute on fired focusin event is good, but requires us write handlers in <script> block (Why? For example, Firefox doesn't support onfocusin attr for input elements).

So, simple and cross-platform solution in my opinion is set onkeydown="return false;" attribute like:

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

This leaves element eligible for validation and doesn't allow to enter anything into it.

Answer 3

I didn't like binding to the focusin/out events. It also requires you to add CSS styling. The below code removes the readonly attribute and re-applies it when the form is not valid.

$('#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

You can override the original "elements" function with an implementation which quite similar to the original implementation except for the readonly field handling. This is not an elegant solution, but it does work. If you update your jquery validate library, you also need to recheck your overridden method.
* UpToDate * See jquery-validate-1.14 changeLog: Revert "Ignore readonly as well as disabled fields." :):)

$.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;
    });         
};