Classes and Attributes of Validation

myrules validate a form element by two ways: using Validation Classes or using Validation Attributes.

Validation Classes

myrules provide classes that allow you to validate diferents form elements, e.g: .mr-required, .mr-email, .mr-number-int, .mr-password-good, .mr-username, etc.

In the example below, the .mr-number-int class was used to indicate that the input value must be an integer number.

<input type="text" class="mr mr-number-int"> 
<!--the class "mr-number-int" is a Validation Class-->

Validation Attributes

Validation Attributes are atrributes used by myrules to validate form elements. They are two types of Validation Attributes:

• HTML input attributes (example: required, max, min, maxlength, type); and
• Custom Attributes (example: minlength or data-minlength, resolution or data-resolution, maxcheck or data-maxcheck)

Custom attributes are attributes that are not part of the standard HTML5 attributes or are not designed for a particular use.

The following example uses the required validation attribute to specify that the form element requires a value

<input type="text" class="mr" required > 
<!--the attribute "required" is a Validation Attribute-->

Some types of validations uses both (class and attribute) to make validation. For exemple, to specifies that the element value is required you can use required atrribute or .mr-required class.

Feedback classes

All Classes and Attributes of Validations has their Feedback Class. The Feedback Classes are classes used to display the feedback of validation.

To display the feedback of validation of an element, add the .mr-feedback class into the element where the feedback will placed and add the Feedback Class.

E.g: The feedback class of requerid atrribute is .mr-requerid-fb, the feedback class of .mr-url class is .mr-url-fb.

<input type="text" class="mr" required > 
<!--Validation feedback-->
<p class="mr-feedback mr-required-fb">Please fill out this field!</p>
<!--the class "mr-required-fb" is Feeback Class of Validation Attribute "required"-->

The .mr-valid-fb and .mr-invalid-fb are the only Feedback Classes that can be used to display feedback for all Classes and Attributes of Validation.

<input type="text" class="mr" required > 
<p class="mr-feedback mr-invalid-fb">Please fill out this field!</p>

<input type="text" class="mr mr-number-int"> 
<p class="mr-feedback mr-valid-fb">Good, it´s valid integer number!</p>

Usually, Feedback Classes are displayed when the element has invalid, except the .mr-valid-fb class that is displayed when the element has valid.

Using Validation Classes

Example: validate integer number using myrules Validation Classes

To validate integer number using a Validation Classes, just add the .mr and .mr-number-int classes into the attributes classes of the input element to validate.

The Feedback Class of an invalid integer number is .mr-number-int-fb.

Add the .mr-feedback class into the classes of elements where the validation feedbacks will placed with their .mr-number-int-fb Feedback Class.

<form>
    <!--Integer number text field-->
    <input type="number" class="mr mr-number-int" placeholder="Integer number" > <br>
    <!--Validation feedback-->
    <p class="mr-feedback mr-number-int-fb">Please input an integer number!</p>

    <input type="submit" value="submit">
    <input type="reset" value="reset">
</form>

Using Validation Attributes

Example 1: validate requireds fields using Validation Attribute

The validation attribute of required field is the required HTML input attribute and their feedback class is .mr-required-fb.

<form>
    <!--Required text field-->
    <input type="text" class="mr" required placeholder="First name"> <br>
    <!--Validation feedback-->
    <p class="mr-feedback mr-required-fb">Please fill out this field!</p>

    <!--Required text field-->
    <input type="text" class="mr" required placeholder="Last name"> <br>
    <!--Validation feedback-->
    <p class="mr-feedback mr-required-fb">Please fill out this field!</p>

    <input type="submit" value="submit">
    <input type="reset" value="reset">
</form>

Example 2: validate the minimum allowed length of an input field using Validation Attribute

The validation attribute to specify the minimum allowed length of an input field is the minlength and their feedback class is .mr-minlength-fb.

<form>
    <!--Input text-->
    <input type="text" class="mr" minlength="5" placeholder="Fill out this text field"> <br>
    
    <!--Validation feedback-->
    <p class="mr-feedback mr-minlength-fb">Please, input at least 5 characters!</p>

    <input type="submit" value="submit">
    <input type="reset" value="reset">
</form>

HTML 5 valid page with Custom Attributes

If you want to make your HTML 5 page valid, use the data-* HTML 5 Global Attribute instead of the regular Custom Attribute.

For example: use the data-minlength HTML 5 Custom Attribute instead of minlength regular Custom Attribute.

Example: validate the minimum allowed length of an input field using HTML 5 Global Attribute data-*

<form>
    <!--Input text-->
    <input type="text" class="mr" data-minlength="5" placeholder="Fill out this text field"> <br>
    
    <!--Validation feedback-->
    <p class="mr-feedback mr-minlength-fb">Please, input at least 5 characters!</p>

    <input type="submit" value="submit">
    <input type="reset" value="reset">
</form>

List of Classes and Attributes of Validation and their Feedback Classes

Complete list of all Classes and Attributes of Validation with description and their Feedback Classes.