CODEWITHSUNDEEP
twitter-bootstrapjquery-validate
user982124
user982124

Reputation: 4600

Twitter Bootstrap and jQuery Validation Plugin - position or error text

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.

One of the forms has some hidden table rows that appear if the user answers yes to a question. I can't seem to control the position of the error text ("this field is required") on these pages and the error text is not coloured red as per my CSS.

Here's the html:

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

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


      <tr>
      <td><strong>Question 1</strong></td>
      <td>please answer yes or no to this question</td>
      <td>
          <div class="controls">
              <label class="radio inline">
      <input type="radio" name="AE_W4" id="AE_W4Yes" value="Yes" required>Yes         </label>
              <label class="radio inline">
      <input type="radio" name="AE_W4" id="AE_W4No" value="No" required>No        </label>
              <label for="AE_W4" class="validateError"></label>
    </div>
      </td>
      </tr>


      <tr id="adverseEventDetails">
      <td></td>
      <td>Please enter the description here</td>
      <td>
          <div class="controls">
      <textarea name="AE_Details_W4" id="AE_Details_W4" rows="3" required></textarea>
      <label for="AE_Details_W4" class="validateError"></label>
    </div>
      </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>

and here's the script:

$().ready(function() {
    // validate the form when it is submitted
    $("#additional").validate();
        errorClass: "validateError";

    if($("#AE_W4Yes:checked").length != 0){
                // yes is checked... show the dependent fields  
                    $("#adverseEventDetails").show(); 
                }else{
                    // hide it and blank the fields, just in case they have something in them
                    $("#adverseEventDetails").hide(); 
                    $("#AE_Details_W4").val("");
                }


    $("#AE_W4Yes").click(function () {
        $("#adverseEventDetails").show();
    });

    $("#AE_W4No").click(function () {
        $("#adverseEventDetails").hide();
        $("#AE_Details_W4").val("");
    });

});

I've setup a jsFiddle here that demonstrates this.

Upvotes: 0

Views: 1076

Answers (1)

Sparky
Sparky

Reputation: 98718

Your code:

// validate the form when it is submitted
$("#additional").validate();
    errorClass: "validateError";

You have a serious syntax error in your code above.

There is nothing wrong with $("#additional").validate();, it simply initializes the plugin.

However, errorClass: "validateError"; cannot be floating around in your JavaScript all by itself like that. If you want to employ the errorClass option, you must use it as per documentation, and list it inside .validate() along with any other rules and/or options...

// .validate() initializes the plugin
$("#additional").validate({
    // the rules and/or options for Validate() get listed here,
    // and they are separated by commas, not semicolons.
    errorClass: "validateError"
});

Upvotes: 2

Related Questions