can/demos/forms/advanced-manual-validation.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<style>
input.error {
	border: 4px solid red;
}

p.error {
	color: red;
}
</style>

<manually-validated-form></manually-validated-form>

<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import { StacheElement, type } from "can";

class ManuallyValidatedForm extends StacheElement {
    static view = `
        <form>
            {{# if(this.phoneNumberError) }}
                <p class="error">{{ this.phoneNumberError }}</p>
            {{/ if }}

            <p>
                Phone Number:
                <input type="text" value:bind="this.userPhoneNumber"
                  {{# if(this.phoneNumberError) }}class="error"{{/ if }}>
            </p>

            <input type="submit" disabled:from="this.phoneNumberIsInvalid">
        </form>
    `;


    static props = {
        userPhoneNumber: type.maybeConvert(String),

        get phoneNumber() {
            return this.userPhoneNumber && this.userPhoneNumber.replace(/-/g, "");
        },

        get phoneNumberIsInvalid() {
            return /[0-9]{3}[0-9]{3}[0-9]{4}/.test(this.phoneNumber) === false;
        },

        get phoneNumberError() {
            if (this.phoneNumber && this.phoneNumberIsInvalid) {
                return "Invalid phone number (ex: 123-456-7890).";
            };
        }
    };
};
customElements.define("manually-validated-form", ManuallyValidatedForm);
</script>