jQuery Validate and disabled input field

Question

I'm using below bootstrap as a dropdown picker, which then with an associated jQuery function displays the choosen field in the input type="text". But users can still write their own in the input field, which I would like to avoid. I tried using the disabled attribute on the input field, but if I do that the jQuery Validate plugin will just ignore it and grant permission even if it's empty.

Is it possible to "deactivate" an input field with type="text", without using the disabled attribute so that I may still use jQuery Validate.

<div class="form-group">
    <div class="input-group">
         <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Choose<span class="caret"></span></button>
              <ul class="dropdown-menu">
                  <li><a href="#" id="a">1</a></li>
                  <li><a href="#" id="b">2</a></li>
                  <li><a href="#" id="c">3</a></li>
                  <li><a href="#" id="d">4</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#" id="e">5</a></li>
              </ul>
         </div>
         <input type="text" id="abc" autocomplete="off" name="abc" placeholder="Select *" class="form-control" aria-label="...">
    </div>  
</div>

Answer 1

There is no direct solution... if the field is "disabled" via the disabled attribute, the jQuery Validate plugin will always ignore it. (Logically, there is no point in validating something the user cannot edit.)

However there is a workaround. If you use the readonly attribute instead of disabled, it can be validated.

<input type="text" name="abc" readonly="readonly" />

DEMO: http://jsfiddle.net/85pu1oe5/

Answer 2

Seems like you need to use the readonly="readonly" attribute http://www.w3schools.com/tags/att_input_readonly.asp