SubmitButton plugin

Automatically validate the form when pressing its Submit button

Usage

The following piece of code is the starting point to use the SubmitButton plugin:
<html>
<head>
<link rel="stylesheet" href="/vendors/formvalidation/dist/css/formValidation.min.css" />
</head>
<body>
<form id="demoForm" method="POST">
...
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit">Submit</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
submitButton: new FormValidation.plugins.SubmitButton({
// Optional setting:
// Set it to true if you are using a traditional ASP.Net form
// and there is a custom handler for the submit button
// aspNetButton: false,
}),
...
},
}
);
});
</script>
</body>
</html>
The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.
If you want the form to be submited to the server after pressing its Submit button and all fields are valid, use the DefaultSubmit plugin
Look at the FieldStatus plugin to see how you can disable the Submit button when there is at least one invalid field

Options

OptionTypeDescription
aspNetButtonBooleanSet it to true to support classical ASP.Net form. It is false by default
buttonsFunctionIt is a function that accepts the current form element and returns the list of submit buttons. By default, the plugin ignores all the submit button/input which have the formnovalidate attribute
The buttons option is useful in case we have an external button which is outside of the form:
<form id="demoForm">...</form>
<!-- External button -->
<button type="button" id="externalButton" />
The buttons option should look like as following:
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: ...,
plugins: new FormValidation.plugins.SubmitButton({
buttons: function(form) {
return [].slice.call(document.getElementById('externalButton'));
},
}),
}
);

Example

Try to press the Add product button to see the form will be validated.
SubmitButton plugin

See also

Changelog

v1.7.0
  • Allow to define the submit buttons via the buttons option
  • The selector option is removed
v1.6.0
  • Fixed an issue that the plugin doesn't send the clicked button to server
v1.5.0
  • Fixed an issue that the click handler of submit button of ASP.Net form isn't executed. Now you can fix it by setting the aspNetButton option to true
v1.0.0
  • First release