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/@form-validation/umd/styles/index.min.css" />
</head>
<body>
<form id="demoForm" method="POST">
...
<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/@form-validation/umd/bundle/popular.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
submitButton: new FormValidation.plugins.SubmitButton({
}),
...
},
}
);
});
</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 pluginLook at the
FieldStatus plugin to see how you can disable the Submit button when there is at least one invalid field
Options
| Option | Type | Description |
|---|
aspNetButton | Boolean | Set it to true to support classical ASP.Net form. It is false by default |
buttons | Function | It 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 |
liveMode | Boolean | If it is set to false, all validations are disabled until users submit the form. The option is set to true by default |
The buttons option is useful in case we have an external button which is outside of the form:
<form id="demoForm">...</form>
<button type="button" id="externalButton" />
The buttons option should look like as following:
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: ...,
plugins: {
submitButton: new FormValidation.plugins.SubmitButton({
buttons: function(form) {
return [].slice.call(document.getElementById('externalButton'));
},
}),
...
},
}
);
Using the npm packages
If you are using a bundler such as
Webpack,
Rollup,
Parcel or
Vite, etc., to bundle
your application, then it's recommended to use the FormValidation NPM packages.
$ npm install @form-validation/bundle
$ npm install @form-validation/plugin-submit-button
- Import and use the SubmitButton plugin:
import { formValidation } from '@form-validation/bundle/popular';
import { SubmitButton } from '@form-validation/plugin-submit-button';
formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
submitButton: new SubmitButton({
...
}),
...
},
}
);
Example
Try to press the Add product button to see the form will be validated.
See also
Changelog
- Allow to define the submit buttons via the
buttons option - The
selector option is removed
- Fixed an issue that the plugin doesn't send the clicked button to server
- 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