Validation - Midone - Tailwind Admin Dashboard Template

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);
                            });
                            });