Git Product home page Git Product logo

Comments (7)

1000hz avatar 1000hz commented on August 21, 2024

I don't really understand the problem you're having. the disable option is true by default, so you shouldn't have to do anything to get the submit button to be disabled when the form is invalid.

As to your question about how you can tell if the form is invalid during submit, you can check if the submit event isDefaultPrevented():

$('#NewUserForm').submit(function(e) {
  if (e.isDefaultPrevented()) {
    console.log("#NewUserForm is invalid!")
  }
}

from bootstrap-validator.

dtseaman avatar dtseaman commented on August 21, 2024

I have the same problem. My "submit" button is not disabled.

I added data-disable="true" to the form element, and nothing happened. I also tried adding it to the submit button and nothing happened...

Whether or not I add the data disable option, when I click my submit button, all my fields suddenly mark themselves as "valid" and my form submits.
It's a modal form...

<!-- Sign Up Modal -->
<div id="signUp" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal Content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Sign Up for {{SITE_NAME}}</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal"  id="signUpForm" data-toggle="validator" role="form">
            <div class="form-group has-feedback">
                <label for="inputUsername" class="control-label col-xs-2">Username</label>
                <div class="col-xs-10">
                    <input  type="text" class="form-control" id="inputUsername" name="username" placeholder="Username" data-remote="/namequery" data-error="This name is either too short (min 5 char), or is already in use.">
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="form-group has-feedback">               
                  <label for="inputEmail" class="control-label col-xs-2">Email</label>                  
                    <div  class="col-xs-10">                    
                      <input type="email" name="email"  class="form-control" id="inputEmail" placeholder="Email" data-error="That email address is invalid">
                      <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                      <div class="help-block with-errors"></div>
                    </div>  
            </div>
            <div class="form-group has-feedback">
                <label for="inputPassword" class="control-label col-xs-2">Password</label>
                <div class="col-xs-8">
                    <input type="password" name="password"  class="form-control" id="inputPassword" placeholder="Password" data-minlength="5">
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="form-group has-feedback">
                <label for="samePassword" class="control-label col-xs-2">(Confirm)</label>
                <div class="col-xs-8">
                    <input type="password" name="samepassword"  data-match="#inputPassword" class="form-control" id="samePassword" placeholder="(confirm password)">
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                    <div class="help-block with-errors"></div>
                </div>
            </div>        
      </div>
      <div class="modal-footer">
        <div class="form-group">
          <div class="btn-group" role="group" aria-label="...">
            <button  type="submit" class="btn btn-primary">Sumbit</button>
            <button type="reset"  class="btn btn-primary">Clear</button>
            <button type="button" class="btn btn-primary">Close</button>
          </div>
        </div>
        </form>
      </div>
    </div>    
  </div>
</div>

from bootstrap-validator.

1000hz avatar 1000hz commented on August 21, 2024

@dtseaman you haven't marked any of your fields as required, so they are valid when empty. Also, you don't need to use the data-disable attribute.

from bootstrap-validator.

dtseaman avatar dtseaman commented on August 21, 2024

argggh ok. thank you. It works now.

from bootstrap-validator.

marietouT avatar marietouT commented on August 21, 2024

Hello i have same probleme, all my fields are required but my "submit" input is not disabled.

   <form data-toggle="validator" role="form" method="POST" id="post">
        <div class="form-group has-feedback">
            <label for="firstname">Prénom*</label>
            <input type="text" pattern="^[_A-z0-9]{3,}$" maxlength="40" id="firstname" class="form-control" required>
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
            <div class="help-block with-errors"></div>
        </div>
        <div class="form-group has-feedback">
            <label for="lastname">Nom*</label>
            <input type="text" id="lastname" pattern="^[_A-z0-9]{3,}$" maxlength="40" class="form-control" data-error="Veuillez insérer un nom valide" required/>
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
            <div class="help-block with-errors"></div>
        </div>
        <input id="submit" type="submit" value="Enregistrer">
    </form>

from bootstrap-validator.

1000hz avatar 1000hz commented on August 21, 2024

@marietouT you need to use a <button type="submit"> instead of <input type="submit">

from bootstrap-validator.

marietouT avatar marietouT commented on August 21, 2024

it works now. thanks 👍

from bootstrap-validator.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.