Star

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
email
length
required
number