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.