Jquery validator submits when bootstrap form is invalid

Question

So basically, when the form is valid it should link to a new page that says success. that part works fine.

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)

Is there a problem with my validate function i am not seeing or is it in the bootstrap?

demo The demo submits on the second click for some reason

jquery validate

          $(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.'
            }
        },  

      });
    });

HTML

      <div class="container">
          <div class="col-lg-6">
              <h2 class="form-signin-heading">Please sign in</h2>   
    <form  class="form-horizontal required" action="success.html" method="get" name="signin" id="signin" role="form">

      <div class="form-group">
        <label for="inputUsername" class=" required col-lg-2 control-label">UserName</label>
        <div class="col-lg-5">
          <input name="name" type="text" class="form-control" id="username" placeholder="Username"required autofocus>
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword" class=" required col-lg-2 control-label">Password</label>
        <div class="col-lg-5">
          <input name="password" type="password" class="form-control" id="password" placeholder="Password">
        </div>
      </div>

      <div class="form-group">
        <label for="confirmPassword" class="col-lg-2 control-label">Confirm Password</label>
        <div class="col-lg-5">
          <input name="confirmPassword" type="password" class="form-control" id="confirmPassword" placeholder=" Retype Password">
        </div>
      </div>

      <div class="form-group">
        <div class="col-lg-offset-2 col-lg-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" name="submit" id="submit" class="btn btn-default">SignIn</button>
        </div>
    </div>
    </div>
    </form>

yes, sorry one moment it must not be spaced properly in my question — nope
– nope, Commented Nov 22, 2013 at 23:53
<form class="form-horizontal required" action="success.html" method="get" name="signin" id="signin" role="form"> is this line what you are reffering too? — nope
– nope, Commented Nov 22, 2013 at 23:54

tibc-dev · Accepted Answer · 2013-11-23 18:29:03Z

2

Ok, you need to remove the extraneous name param.

name: { required: true , name: true },

RULES:

:rules: {
            name: {
                required: true
            },
            password: {
                required: true,
                rangelength:[8,12]
            },
         confirmPassword: {equalTo:'#password'},
         spam: "required"

        },

edited Nov 23, 2013 at 18:29

answered Nov 23, 2013 at 0:02

tibc-dev

98312 silver badges16 bronze badges

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

2 Comments

nope Over a year ago

when i remove the extra param the form doesnt submit at all when the passowrds are correct

tibc-dev Over a year ago

So your rules should look like above.

Collectives™ on Stack Overflow

Jquery validator submits when bootstrap form is invalid

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related