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>

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>

• javascript
• jquery
• twitter-bootstrap
• jquery-validate

• So where is the relevant JavaScript? – Sparky Commented Apr 11, 2016 at 18:49

4 Answers 4

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/

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

No matter how od this question is - there is a workaround which is quite simple. Why not using a hidden field additionally to the one disabled that is ignored by jquery.validate.js?

e.g.

<input type="text" name="name" class="form-control" value="<?php echo htmlentities($user['name']); ?>" disabled>
<input type="hidden" name="name" class="form-control" value="<?php echo htmlentities($user['name']); ?>">

Works well for me. Same goes for

<select style="display:none;"><option value="sample">Sample</option></select>

display: none; will hide the element, completely (space and all). It is still enabled and thus its data still sent. Have a try.

Make sure, ignore: ".ignore", is added to the validate.js because it enables all hidden fields.

Your best bet would be to rely on validator.showErrors() method and manually validate this disabled input.

I had a similar situation when I needed to validate terms checkbox, but it was designed to be disabled until user scrolls through the terms text. That's what I come up with in the end:

        var message = "You must accept the Terms and Conditions in order to proceed with registration";
        var termsValidator = $('#step-5 form').validate({
            rules: {
                acceptTnC: "required"
            },
            messages: {
                acceptTnC: message
            },
            submitHandler : function (form) {
                // Need to manually validate, cause checkbox is disabled by default and validation
                // skips disabled fields
                if(!form.acceptTnC.checked) {
                    termsValidator.showErrors({
                        acceptTnC: message
                    })
                }
                else {
                    submitForm();
                }
            }
        });
        $('[name="acceptTnC"]').on('change', function (e) {
            termsValidator.element(e.target);
        })

Bottom part is important to toggle error message once the checkbox is enabled and user can click it on or off