Form Validation

learn how to create a validation for any form control with the Phenix validation method.

How it Works

Here’s how the Standard Default HTML form validation works :

form validation is applied via CSS’s two pseudo-classes, :invalid and :valid, and the status class-names .error, .success which applies to <input>, <select>, and <textarea> elements that have .form-control class-name.
PDS scopes the :invalid,:valid styles to parent .was-validated class usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on the page load. This way, you may choose when to activate them (typically after form submission is attempted).
To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the .was-validated class from the <form> again after submission.
Due to constraints in how CSS works, we cannot (at present) apply styles <label> that come before a form control in the DOM without the help of custom JavaScript using the colors utilities.
All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.
Feedback messages may utilize the browser defaults (different for each browser, and un-stylable via CSS) or our custom feedback styles with additional HTML and CSS.
You may provide custom validity messages with setCustomValidity in JavaScript.

With that in mind, consider the following demos for our custom form validation styles, optional server-side classes, and browser defaults.

Default Validation API

below you can find a demo for the Default HTML validation and see it in action try to submit the form with values in .form-control and without value in others.

<!-- Form -->
<form action="" class="row gp-15 default-validation">
    <!-- Column -->
    <div class="col-6 col-md-4 mb-15">
        <!-- Form Control -->
        <input type="text" placeholder="Required and A-Z only" class="form-control" pattern="[A-Za-z]+" name="demo-az"  required="">
    </div>
    <!-- Column -->
    <div class="col-6 col-md-4 mb-15">
        <!-- Form Control -->
        <input type="text" placeholder="Required and 0-9 only" class="form-control" pattern="[0-9]+" name="demo-num" required="">
    </div>
    <!-- Column -->
    <div class="col-6 col-md-4 mb-15">
        <button class="btn primary fluid">Submit Test</button>
    </div>
    <!-- // Column -->
</form>
<!-- // Form -->

//====> Validation Demo <====//
let input = Phenix('[name="demo-az"], [name="demo-num"]');

//====> Change Appearnce on invalid <====//
input.on('invalid', event => {
    //====> Get Current Element <====//
    let input = event.target,
        form  = Phenix(input).ancestor('form');
    //====> .Value Check. <====//
    if (input.validity.valueMissing) {
        input.setCustomValidity('Phenix Custom Requered Message.');
    }
    //====> .Pattern Check. <====//
    else if (input.validity.patternMismatch) {
        input.setCustomValidity('this input accept only letters from a-z.');
    }
    //====> Add Style Class to the Parent Form <====//
    Phenix(form).addClass('was-validated');
});

//====> Reset When New Value is Set <====//
input.on('input', event => {
    //====> Get Current Element <====//
    let input = event.target;
    //===> Reset Validation <===//
    input.setCustomValidity('');
    //====> Check for Validation <====//
    input.checkValidity();
});

API Function	Return Description	Type
`input.willValidate`	`true` if the element will be validated when the form is submitted.	properties
`~.validity.valueMissing`	`true` if the element has no value but is a required field.	properties
`~.validity.typeMismatch`	`true` if the element’s value is not in the correct syntax.	properties
`~.validity.patternMismatch`	`true` if the element’s value doesn’t match the provided pattern	properties
`~.validity.tooLong`	`true` if the element’s value is longer than the maximum length	properties
`~.validity.tooShort`	`true` if the element’s value, if it is not the empty string, is shorter than the minimum length	properties
`~.validity.stepMismatch`	`true` if the element’s value is lower than the provided minimum	properties
`~.validity.rangeUnderflow`	`true` if the element’s value is lower than the provided minimum	properties
`~.validity.rangeOverflow`	`true` if the element’s value is higher than the provided maximum	properties
`~.validity.badInput`	`true` if the user has provided input and is unable to convert it to a value.	properties
`~.validity.customError`	Returns `true` if the element has a custom error.	properties
`~.validity.valid`	Returns `true` if the element’s value has no validity problems.	properties
`~.validationMessage`	Returns the error message that would be shown to the user if the element was to be checked for validity.	properties
`~.checkValidity()`	Returns `true` if the element’s value has no validity problems.	Method
`~.reportValidity()`	`true` if the element’s value has no validity problems and fires an `invalid` event at the element.	Method
`~`.`setCustomValidity('MSG');`	Sets a custom error, so that the element would fail to validate.	Method

Phenix Validation

phenix design system provides a simple yet powerful method to make the custom validation as easy as possible using the CSS utilities and javascript flexibility to build a better-friendly UI validation, the Phenix('.selector').validation(); gives you the ability to validate your controls as a group with the default browser API patterns like required inputs, min/max length etc, with the advantage of extending these patterns with a custom regex patterns for each input in the selected form,

and you can use the pattern to create a series of validation with different messages and errors to each controller in your form if you selected a form element but it works differently in case your selector is an individual input element, the pattern here does not require you to name the input but it will check for each pattern in the list and apply it to the selected controller.