jQuery validate not working (Bootstrap form included)

Question

I am using Twitter Bootstrap too (for the first time). Here is minimized code so you can help me determine why it's not even going to validate function! I've been working for hours now, I don't know what I am missing. Validate.js is downloaded from official plugin site but it's same if I use from cdn.

<head>
<link rel="stylesheet" href="css/bootstrap.css"  type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

    <script>
    $().ready(function() {
          $("#myform").validate({
             rules: {
                 InputName: {
                    required: true
                }
             }
          });
    });
</script>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">

            <form name="myform" id="myform" method="post" action="">
                <label class="control-label" for="InputName">Name:</label>
                <input type="text" class="form-control" name="InputName" placeholder="ex. John">    

            <button type="submit" class="btn btn-default">Submit</button>
            </form>


        </div>
    </div>
</div>

</body>

Are you getting any console errors? Are you sure the scripts are properly included? — Sparky
– Sparky, Commented Nov 26, 2013 at 16:54

Sparky · Accepted Answer · 2013-11-26 16:53:10Z

1

1) <center> was deprecated many years ago. Use CSS instead.

2) ().ready(function({...})) is not recommended as per jQuery documentation. Use $(document).ready(function({...})) or $(function({...})) instead.

However, your code is working exactly as you posted it.

DEMO: http://jsfiddle.net/FbAYz/

answered Nov 26, 2013 at 16:53

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mortusdetus Over a year ago

You have any idea why not working on my server then?

Sparky Over a year ago

@mortusdetus, how could I know anything about your server? I can only go with what you've posted in your OP. Are you getting any JavaScript errors? Did you properly include the files? Did you upload them? Are the file paths correct?

mortusdetus Over a year ago

Maybe you have an idea because I certainly don't. If I use cdn links it's the same thing so not about including properly.

Sparky Over a year ago

@mortusdetus, I don't have access to your server but since JavaScript runs in the client, the problem probably has nothing to do with your server. Again, for the third time, do you have any JavaScript errors in your console?

mortusdetus · Accepted Answer · 2013-11-27 08:47:30Z

1

Must use https for src links instead of http.

answered Nov 27, 2013 at 8:47

mortusdetus

972 silver badges12 bronze badges

Comments

Subliminal Hash · Accepted Answer · 2013-12-23 13:48:11Z

1

Removing a css class name from my form markup resolved a similar issue I was going through.

I had a class "validate-form" in the <form> tag.

answered Dec 23, 2013 at 13:48

Subliminal Hash

13.8k21 gold badges77 silver badges108 bronze badges

Comments

Humphrey · Accepted Answer · 2016-03-27 09:45:12Z

0

Try to use this

<script>
    $(document).ready(function() {
          $("#myform").validate({
             rules: {
                 InputName: {
                    required: true
                }
             }
          });
    });
</script>
/*Instead of */

  <script>
    $().ready(function() {
          $("#myform").validate({
             rules: {
                 InputName: {
                    required: true
                }
             }
          });
    });
</script>

answered Mar 27, 2016 at 9:45

Humphrey

2,8273 gold badges30 silver badges39 bronze badges

Comments

Zurez · Accepted Answer · 2016-06-20 23:19:55Z

0

If everything is correct but still no validation is happening then Try to use the debug:true option

$("#myForm").validate({
  debug: true
});

Reload the page and check the console for any possible errors``

answered Jun 20, 2016 at 23:19

Zurez

1912 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery validate not working (Bootstrap form included)

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related