Enabling the submit button
← Examples
Always enabling the submit button
By default, the submit buttons will be disabled if there is at least one invalid field.
If you want to enable the submit buttons all the time, triggering the err.field.fv, success.field.fv event and using the disableSubmitButtons() method:
<form id="alwaysEnableButtonForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Task</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="task" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-5">
<textarea class="form-control" name="description" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Priority</label>
<div class="col-xs-5">
<select class="form-control" name="priority" style="width: 200px;">
<option value="">Choose the priority</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#alwaysEnableButtonForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
task: {
validators: {
notEmpty: {
message: 'The task is required'
}
}
},
description: {
validators: {
notEmpty: {
message: 'The description is required'
}
}
},
priority: {
validators: {
notEmpty: {
message: 'The priority is required'
}
}
}
}
})
.on('err.field.fv', function(e, data) {
// $(e.target) --> The field element
// data.fv --> The FormValidation instance
// data.field --> The field name
// data.element --> The field element
data.fv.disableSubmitButtons(false);
})
.on('success.field.fv', function(e, data) {
// e, data parameters are the same as in err.field.fv event handler
// Despite that the field is valid, by default, the submit button will be disabled if all the following conditions meet
// - The submit button is clicked
// - The form is invalid
data.fv.disableSubmitButtons(false);
});
});
</script>If you want the submit button to be enabled only after clicking it, use the getSubmitButton() method to check whether or not the submit button is clicked:
$(document).ready(function() {
$('#alwaysEnableButtonForm')
.formValidation({
...
})
.on('err.field.fv', function(e, data) {
if (data.fv.getSubmitButton()) {
data.fv.disableSubmitButtons(false);
}
})
.on('success.field.fv', function(e, data) {
if (data.fv.getSubmitButton()) {
data.fv.disableSubmitButtons(false);
}
});
});Enabling the submit button when there is no invalid fields
The submit button is disabled initially. You want it to be enabled when there is at least one valid field and there is no invalid one.
In this case, we can trigger the success.field.fv event, which is called when the field is valid, and check if there is invalid field via the getInvalidFields() method.
<form id="taskForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Task</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="task" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-5">
<textarea class="form-control" name="description" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<!-- Initially, the submit button is disabled -->
<button type="submit" class="btn btn-default" disabled="disabled">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#taskForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
task: {
validators: {
notEmpty: {
message: 'The task is required'
}
}
},
description: {
validators: {
notEmpty: {
message: 'The description is required'
}
}
}
}
})
.on('success.field.fv', function(e, data) {
if (data.fv.getInvalidFields().length > 0) { // There is invalid field
data.fv.disableSubmitButtons(true);
}
});
});
</script>