Custom validations
It is possible to extend the native jSuites.form
plugin validations, that can be used use the data-validation
property.
Source code example
<html> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <form id='myForm'> <div class='section-container'> <div class='row'> <div class='column'> <div class='form-group'> <label>Domain</label><br> <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><br> <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' onclick="myForm.save()"> </div> </div> </div> </div> </form> <script> var myForm = jSuites.form(document.getElementById('myForm'), { url: '/v4/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 && reg.test(value) ? true : false; }, password: function(value) { var reg = new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/); return value && reg.test(value) ? true : false; } }, onerror: function(el, message) { // Format message message = message.replace(new RegExp(/\n/g), "<br>"); // Custom Notification jSuites.notification({ message: message }); } }); </script> </html>
Native validations
Validations |
---|
length |
required |
number |