VALIDATE

Validate an input field

Front-end validation is a must have. With a simple attribute and a regular expression, mixhtml can validate any input field, textarea, or checkbox.

In this example, the input field is validated once the button is clicked. If validation fails, the field's background turns red, else, the form is submitted.

<form id="form" action="items" mix-post>
    <input mix-validate="^.{2,5}$">
    <button>
        Validate and submit
    </button>
</form>

<browser mix-after-end="#form">
    <div mix-fade-2000>
        Form was handled successfully
    </div>
</browser>

Validate an input field while typing

In this example, the input field is validated as the user types in it. If the field passes validation, the data is submitted to the server. A delay of 0.5 seconds is set, so only after the user stopped typing for that amount of time, the data is submitted.

    <input
        id="test"
        mix-post="items"
        mix-delay="500"
        mix-validate="^.{2,5}$"
    >

<browser mix-after-end="#test">
    <div mix-fade-2000>
        Data handled successfully
    </div>
</browser>