Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter's Bootstrap Form Validation [duplicate]

Possible Duplicate:
How to use Twitter Bootstrap popovers for jQuery validation notifications?

Trying to use bootstrap's styles for form validation.

I'm using this javascript validator, that was customized for bootstrap: https://github.com/ddarren/jQuery-Live-Form-Validation-For-Twitter-Bootstrap

In the head:

    <link href="bootstrap.css" rel="stylesheet">
    <script src="jquery.validate.js" type="text/javascript">

In the body:

    <form id="Form" action="" method="post">
      <div class="control-group">
        <input type="text" class="span3" id="Mobile" placeholder="Mobile
          Phone Number" name="Mobile">
      </div>

      <div class="control-group"> 
        <button type="submit" class="btn btn-primary btn-large">Submit
          </button></p>
      </div>
    </form>

And it doesn't highlight the fields with bootstrap's error styles. Any ideas where I'm going wrong? Thanks in advance.

like image 928
stackunderflow Avatar asked Mar 15 '12 02:03

stackunderflow


1 Answers

I'm working on something similar so I think I might help you.
First of all, jQuery-Live-Form-Validation-For-Twitter-Bootstrap library is quite old (September of 2009).
It uses version 1.3.2 of jQuery (the newest is 1.7.1) and it doesn't use the original Bootstrap files at all!
If you downloaded jQuery-Live-Form-Validation-For-Twitter-Bootstrap (what I am sure you did) from github site you can easily check in css folder that there are two css files written by the author of that library.
Answering to your question, I downloaded that lib and I've pasted your code and... it works.
Simply, you need to have in head this (and that files in folders):

<link rel="stylesheet" type="text/css" href="stylesheets/jquery.validate.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
<script src="lib/jquery/jquery-1.3.2.js" type="text/javascript">
</script>
<script src="javascripts/jquery.validate.js" type="text/javascript">
</script>

what is originally taken from jQuery-Live-Form-Validation-For-Twitter-Bootstrap.
If you really want to have Twitter Bootstrap form validation with jQuery I would like to recommend you using combined Twitter Bootstrap and jQuery Validation Plugin.
I am working on it now and it works perfectly.

like image 112
Neu5 Avatar answered Oct 26 '22 02:10

Neu5