Databases
StackOverflow2013
Postsdbo
POJquery validator submits when bootstrap form is invalid
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery validator submits when bootstrap form is invalid
    text
    copied!<p>So basically, when the form is valid it should link to a new page that says success. that part works fine.</p> <p>However if the form is invalid the form still submits, specifically i noticed as long as the all three fields are filled in the form submits even if the passwords do not match. If one of the fields is left blank then it does not submit (as it should)</p> <p>Is there a problem with my validate function i am not seeing or is it in the bootstrap?</p> <p><a href="http://jsfiddle.net/qY8Y2/4/" rel="nofollow">demo</a> The demo submits on the second click for some reason</p> <p>jquery validate</p> <pre><code> $(document).ready(function() { $('#signin').validate({ rules: { name: { required: true, name: true }, password: { required: true, rangelength:[8,12] }, confirmPassword: {equalTo:'#password'}, spam: "required" }, messages: { name: { required: "Please supply a Username." }, password: { required: 'Please type a password', rangelength: 'Password must be between 8 and 12 characters long.' }, confirmPassword: { equalTo: 'The passwords do not match.' } }, }); }); </code></pre> <p>HTML</p> <pre><code> &lt;div class="container"&gt; &lt;div class="col-lg-6"&gt; &lt;h2 class="form-signin-heading"&gt;Please sign in&lt;/h2&gt; &lt;form class="form-horizontal required" action="success.html" method="get" name="signin" id="signin" role="form"&gt; &lt;div class="form-group"&gt; &lt;label for="inputUsername" class=" required col-lg-2 control-label"&gt;UserName&lt;/label&gt; &lt;div class="col-lg-5"&gt; &lt;input name="name" type="text" class="form-control" id="username" placeholder="Username"required autofocus&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="inputPassword" class=" required col-lg-2 control-label"&gt;Password&lt;/label&gt; &lt;div class="col-lg-5"&gt; &lt;input name="password" type="password" class="form-control" id="password" placeholder="Password"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="confirmPassword" class="col-lg-2 control-label"&gt;Confirm Password&lt;/label&gt; &lt;div class="col-lg-5"&gt; &lt;input name="confirmPassword" type="password" class="form-control" id="confirmPassword" placeholder=" Retype Password"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;div class="col-lg-offset-2 col-lg-10"&gt; &lt;div class="checkbox"&gt; &lt;label&gt; &lt;input type="checkbox"&gt; Remember me &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;div class="col-sm-offset-2 col-sm-10"&gt; &lt;button type="submit" name="submit" id="submit" class="btn btn-default"&gt;SignIn&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload