Themes
Choose your theme
rubick
icewall
tinker
enigma
Layouts
Choose your layout
side menu
simple menu
top menu
Accent Colors
Choose your accent color
Appearance
Choose your appearance
Light
Dark
Icewall
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Johnny Depp
johnnydepp@left4code.com
Russell Crowe
russellcrowe@left4code.com
Robert De Niro
robertdeniro@left4code.com
Kevin Spacey
kevinspacey@left4code.com
Products
Sony A7 III
Photography
Nike Tanjun
Sport & Outdoor
Oppo Find X2 Pro
Smartphone & Tablet
Oppo Find X2 Pro
Smartphone & Tablet

## Form Validation

## Implementation

Show example code
Name Required, at least 2 characters
Email Required, email address format
Password Required, at least 6 characters
Age Required, integer only & maximum 3 characters
Profile URL Optional, URL format
Comment Required, at least 10 characters

                    HTMLOpenTag!-- BEGIN: Validation Form --HTMLCloseTag
                                HTMLOpenTagform class="validate-form"HTMLCloseTag
                                    HTMLOpenTagdiv class="input-form"HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        htmlFor="validation-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right flex w-full flex-col sm:flex-row"
    HTMLCloseTag
        Name
                                            HTMLOpenTagspan class="mt-1 text-xs text-slate-500 sm:ml-auto sm:mt-0"HTMLCloseTag
                                                Required, at least 2 characters
                                            HTMLOpenTag/spanHTMLCloseTag
    HTMLOpenTag/labelHTMLCloseTag
                                        HTMLOpenTaginput
        data-tw-merge
        id="validation-form-1" name="name" type="text" placeholder="John Legend" minlength="2" required="required" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 form-control form-control"
    /HTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="input-form mt-3"HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        htmlFor="validation-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right flex w-full flex-col sm:flex-row"
    HTMLCloseTag
        Email
                                            HTMLOpenTagspan class="mt-1 text-xs text-slate-500 sm:ml-auto sm:mt-0"HTMLCloseTag
                                                Required, email address format
                                            HTMLOpenTag/spanHTMLCloseTag
    HTMLOpenTag/labelHTMLCloseTag
                                        HTMLOpenTaginput
        data-tw-merge
        id="validation-form-2" name="email" type="email" placeholder="example@gmail.com" required="required" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 form-control form-control"
    /HTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="input-form mt-3"HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        htmlFor="validation-form-3" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right flex w-full flex-col sm:flex-row"
    HTMLCloseTag
        Password
                                            HTMLOpenTagspan class="mt-1 text-xs text-slate-500 sm:ml-auto sm:mt-0"HTMLCloseTag
                                                Required, at least 6 characters
                                            HTMLOpenTag/spanHTMLCloseTag
    HTMLOpenTag/labelHTMLCloseTag
                                        HTMLOpenTaginput
        data-tw-merge
        id="validation-form-3" name="password" type="password" placeholder="secret" minlength="6" required="required" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 form-control form-control"
    /HTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="input-form mt-3"HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        htmlFor="validation-form-4" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right flex w-full flex-col sm:flex-row"
    HTMLCloseTag
        Age
                                            HTMLOpenTagspan class="mt-1 text-xs text-slate-500 sm:ml-auto sm:mt-0"HTMLCloseTag
                                                Required, integer only & maximum 3 characters
                                            HTMLOpenTag/spanHTMLCloseTag
    HTMLOpenTag/labelHTMLCloseTag
                                        HTMLOpenTaginput
        data-tw-merge
        id="validation-form-4" name="age" type="number" placeholder="21" required="required" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 form-control form-control"
    /HTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="input-form mt-3"HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        htmlFor="validation-form-5" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right flex w-full flex-col sm:flex-row"
    HTMLCloseTag
        Profile URL
                                            HTMLOpenTagspan class="mt-1 text-xs text-slate-500 sm:ml-auto sm:mt-0"HTMLCloseTag
                                                Optional, URL format
                                            HTMLOpenTag/spanHTMLCloseTag
    HTMLOpenTag/labelHTMLCloseTag
                                        HTMLOpenTaginput
        data-tw-merge
        id="validation-form-5" name="url" type="url" placeholder="https://google.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 form-control form-control"
    /HTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="input-form mt-3"HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        htmlFor="validation-form-6" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right flex w-full flex-col sm:flex-row"
    HTMLCloseTag
        Comment
                                            HTMLOpenTagspan class="mt-1 text-xs text-slate-500 sm:ml-auto sm:mt-0"HTMLCloseTag
                                                Required, at least 10 characters
                                            HTMLOpenTag/spanHTMLCloseTag
    HTMLOpenTag/labelHTMLCloseTag
                                        HTMLOpenTagtextarea
        data-tw-merge
        id="validation-form-6" name="comment" placeholder="Type your comments" minlength="10" required="required" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 form-control form-control"
    HTMLCloseTagHTMLOpenTag/textareaHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagbutton
        data-tw-merge
        type="submit" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mt-5 mt-5"
    HTMLCloseTagRegisterHTMLOpenTag/buttonHTMLCloseTag
                                HTMLOpenTag/formHTMLCloseTag
                                HTMLOpenTag!-- END: Validation Form --HTMLCloseTag

                    function onSubmit(pristine) {
                                let valid = pristine.validate();
                                if (valid) {
                                Toastify({
                                node: $("#success-notification-content")
                                .clone()
                                .removeClass("hidden")[0],
                                duration: 3000,
                                newWindow: true,
                                close: true,
                                gravity: "top",
                                position: "right",
                                stopOnFocus: true,
                                }).showToast();
                                } else {
                                Toastify({
                                node: $("#failed-notification-content")
                                .clone()
                                .removeClass("hidden")[0],
                                duration: 3000,
                                newWindow: true,
                                close: true,
                                gravity: "top",
                                position: "right",
                                stopOnFocus: true,
                                }).showToast();
                                }
                                }
                                $(".validate-form").each(function () {
                                let pristine = new Pristine(this, {
                                classTo: "input-form",
                                errorClass: "has-error",
                                errorTextParent: "input-form",
                                errorTextClass: "text-danger mt-2",
                                });
                                pristine.addValidator(
                                $(this).find('input[type="url"]')[0],
                                function (value) {
                                let expression =
                                /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi;
                                let regex = new RegExp(expression);
                                if (!value.length || (value.length && value.match(regex))) {
                                return true;
                                }
                                return false;
                                },
                                "This field is URL format only",
                                2,
                                false
                                );
                                $(this).on("submit", function (e) {
                                e.preventDefault();
                                onSubmit(pristine);
                                });
                                });

Registration success!
Please check your e-mail for further info!
Registration failed!
Please check the fileld form.