Comments (7)
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.
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">×</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.
@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.
argggh ok. thank you. It works now.
from bootstrap-validator.
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.
@marietouT you need to use a <button type="submit">
instead of <input type="submit">
from bootstrap-validator.
it works now. thanks 👍
from bootstrap-validator.
Related Issues (20)
- How to show the list of errors?
- Cannot activate from Javascript
- Needs to Bootstrap 4 Support Validation HOT 1
- Validator to compare two daterange fields issues in comarision
- Bootstrap validator HOT 1
- Session is still present until i dont refresh the page
- Trigger change on text not work
- little issue with customized style for error message
- Form won’t submit after validation triggers HOT 1
- Custom validation doen't add has-error class on Select2 HOT 1
- valida on click one field
- Get input value in error messages (Custom Validation) HOT 1
- change language for error message in spanish
- THIS PROJECT SEEMS TO BE ABANDONED HOT 1
- Hi if i want to make more custom validation how can i do it? Like.. HOT 2
- Error during Minification
- How to format before validation
- Make Custom Validator Global
- validate on click issue
- Custom validator doesn't validate on jquery 3.0 - 3.4 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-validator.