09:42 7/6/26 JavaScript Rich Forms
menu
Documentation keyboard_arrow_right Rich form
JavaScript Form
The [Link] plugin is a JavaScript tool designed to improve FORM functionality in web
applications. It brings advanced form validations, monitors changes in HTML form elements,
and introduces several features to enrich the user experience with forms on web platforms.
Unsaved Changes Alert: Notifies users with an "Are you sure?" message if they attempt
to leave a page with unsaved form changes;
Input Validations: Create standard and custom validation rules for form inputs based on
element properties.
Data Management: Simplify form data persistence and retrieval.
Event Handling: Intercept form submissions, apply custom rules, and execute callbacks;
File Uploads: Helpers for file upload;
Features
Tracking HTML Form Updates
This JavaScript plugin monitors HTML form changes by generating a hash from all form
elements and their values. If a user attempts to navigate away from a page with unsaved form
changes, the plugin re-evaluates the hash. A discrepancy between the initial and final hash
values triggers an alert, indicating unsaved modifications. The plugin's algorithm efficiently
handles dynamic form elements and includes several methods to support application
enhancement.
JavaScript Form validations
Control the form validations from the HTML elements.
[Link] 1/9
09:42 7/6/26 JavaScript Rich Forms
Documentation
Available Methods
Method Description
load(); Load data from a remote server to the form elements.
save(); Save data from the form elements to the server.
reset(); Reset the data from all elements in the form.
resetTracker(); Start tracking again
isChanged(); Check if the form is changed
setIgnore(boolean); Enable or disable the tracking
Initialization properties
Property Description
url: string Remote data source for the form.
Message for the user. For security reasons the browser can show only a default
message: string
message.
setIgnore(boolean); Enable or disable the tracking
Available events
Event Description
As soon the form loads external data.
onload
(element: HTMLElement, data: JSON) => void
Before any data is saved in the remote server. This can be useful to intercept any user
onbeforesave data before sending to the server.
(element: HTMLElement, currenData: JSON) => newData: JSON
[Link] 2/9
09:42 7/6/26 JavaScript Rich Forms
Event Description
After data is sent to the server.
onsave
(element: HTMLElement, result: JSON) => void
When any error happens in the form.
onerror
(element: HTMLElement, message: string) => void
Native validations
[Link]
email
length
required
number
Examples
Tracking changes on the form elements
Please consider the following form example. If the user tries to leave the page without saving,
the tracking will alert for unsaved changes.
[Link] 3/9
09:42 7/6/26 JavaScript Rich Forms
Name
Roger Fredson
Profession
Singer
Gender
Male
Save profile
[Link] 4/9
09:42 7/6/26 JavaScript Rich Forms
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<form id='root'>
<div class='row'>
<div class='column'>
<div class='form-group'>
<label>Name</label>
<input type='text' name='name' value='Roger Fredson'>
</div>
</div>
</div>
<div class='row'>
<div class='column'>
<div class='form-group'>
<label>Profession</label>
<input type='text' name='profession' value='Singer'>
</div>
</div>
</div>
<div class='row'>
<div class='column'>
<div class='form-group'>
<label>Gender</label>
<select name='gender'>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
</div>
</div>
<br>
<div class='row'>
[Link] 5/9
09:42 7/6/26 JavaScript Rich Forms
<div class='column'>
<div class='form-group'>
<input type='button' value='Save profile' id='btn1'>
</div>
</div>
</div>
</form>
<script>
var myTracker = [Link]([Link]('root'));
[Link]('btn1').addEventListener('click',
[Link])
</script>
</html>
Custom validations
It is possible to extend the native [Link] plugin validations, that can be used use the
data-validation property.
Domain
Password
Save profile
[Link] 6/9
09:42 7/6/26 JavaScript Rich Forms
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<form id='root'>
<div class='row'>
<div class='column'>
<div class='form-group'>
<label>Domain</label>
<input type='text' name='domain' data-validation='domain'
data-error='You should enter a valid domain'>
</div>
</div>
</div>
<div class='row'>
<div class='column'>
<div class='form-group'>
<label>Password</label>
<input type='text' name='password' data-
validation='password'
data-error='Your password must contain:\nAt least 1
lowercase alphabetical character\nAt least 1 uppercase alphabetical
character\nAt least 1 numeric character\nAt least one special character,
but we are escaping reserved RegEx characters to avoid conflict\nAnd
must be eight characters or longer\n'>
</div>
</div>
</div>
<br>
<div class='row'>
<div class='column'>
<div class='form-group'>
<input type='button' value='Save profile' id='btn2'>
</div>
[Link] 7/9
09:42 7/6/26 JavaScript Rich Forms
</div>
</div>
</form>
<script>
let myForm = [Link]([Link]('root'), {
url: '/docs/f',
validations: {
domain: function(value) {
var reg = new RegExp(/^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]
{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-
_]{1,61}[a-zA-Z0-9]))\.([a-zA-Z]{2,6}|[a-zA-Z0-9-]{2,30}\.[a-zA-Z]
{2,3})$/);
return value && [Link](value) ? true : false;
},
password: function(value) {
var reg = new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*
[!@#\$%\^&\*])(?=.{8,})/);
return value && [Link](value) ? true : false;
}
},
onerror: function(el, message) {
// Format message
message = [Link](new RegExp("\\\\n", "gm"), "<br>");
// Custom Notification
[Link]({ message: message });
}
});
[Link]('btn2').addEventListener('click', function () {
[Link]()
})
</script>
</html>
Related Tools
[Link] 8/9
09:42 7/6/26 JavaScript Rich Forms
JavaScript Input Mask - Excel-like input masks
JavaScript Tags - Tag and keyword input management
LemonadeJS Forms - Reactive form binding
Jspreadsheet CE Format - Cell formatting in data grids (free)
Data Validations - Spreadsheet cell validation rules (Pro)
Use Rich Forms for standalone form validation, or integrate with Jspreadsheet for data grid
validation and formatting.
[Link] 9/9