Twitter Bootstrap and jQuery Validation Plugin - use class=“control-group error”

问题

I've created a form using the Twitter Bootstrap framework and have integrated the jQuery Validation Plugin. I have one form with a series of yes/no questions with radio buttons that I validate to ensure each question is not empty - this is working well.

I would like to leverage the Bootstrap class="control-group error" to make the error text appear in red so it stands out to the user - currently the "This field is required" text is in black and it's hard to locate.

There's an example of how I would like the error text to appear here:

http://twitter.github.io/bootstrap/base-css.html#forms

at the end of this section under "Validation states". Here's the specific example that shows a red message after the input field (I only want the error to appear after they have clicked the Submit button):

<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Please correct the error</span>
  </div>
</div>

Here's my form showing one question:

<form class="form-horizontal" method="post" id="inputForm">
      <input type="hidden" name="recid" value="1">

      <table class="table table-condensed table-hover table-bordered">

      <h2>Input Form</h2>

          <tr>
          <td>Question 1.</td>
          <td>
              <div class="controls">
                  <label class="radio inline">
          <input type="radio" name="q1" value="Yes" required>Yes          </label>
                  <label class="radio inline">
          <input type="radio" name="q1" value="No" required>No        </label>
                  <label for="q1" class="error"></label>
        </div>
          </td>
          <td>Please answer Yes or No</td>
          </tr>

      </table>
       </div>

        <div class="control-group">
            <div class="controls">
              <button type="submit" class="btn btn-primary">Continue</button>
              <button type="reset" class="btn">Reset</button>
            </div>
        </div>

      </form>

I can't work out how to combine the example with my form so that if they submit the form and they haven't answered a question the alert appears in red.

I've setup a jsFiddle here that shows this is action if that helps.

回答1:

Use the errorClass option to set the jQuery Validate plugin to your desired class for errors. This will apply both .control-group and .error classes upon a validation error...

$(document).ready(function () {
     // initialize the plugin
     $("#inputForm").validate({ 
         errorClass: "control-group error"
     });
});

http://jsfiddle.net/F28PF/1/

See documentation for the plugin options: http://jqueryvalidation.org/validate

EDIT:

As pointed out, the default behavior puts the errorClass on the message and the input element.

If you need to toggle the error/valid classes on something else, you would leverage the highlight and unhighlight callback functions.

$(document).ready(function () {
    // initialize the plugin
    $("#inputForm").validate({
        errorClass: "control-group error",
        highlight: function (element, errorClass, validClass) {
            $(element).closest(".control-group").addClass(errorClass).removeClass(validClass);
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).closest(".control-group").addClass(validClass).removeClass(errorClass);
        }
    });
});

回答2:

To use the control-group the way bootstrap was intended to be used, you want to set the value of the surrounding control-group. The accepted answer isn't quite right, you don't want to put control-group on the input itself, but the container. This code should work.

$("#page-form").validate({
        highlight: function (element, errorClass, validClass) {
            $(element).closest(".control-group").addClass(errorClass).removeClass(validClass);
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).closest(".control-group").addClass(validClass).removeClass(errorClass);
        }
    });

来源：https://stackoverflow.com/questions/17858360/twitter-bootstrap-and-jquery-validation-plugin-use-class-control-group-error

标签

twitter-bootstrap

jquery-validate