The "Validation" feature allows you to define and enforce data validation rules in your web forms. By setting up validation, you can ensure that user-submitted data meets specific criteria and is error-free.
HTMLOpenTag!-- BEGIN: Validation Form --HTMLCloseTag
HTMLOpenTagform class="validate-form"HTMLCloseTag
HTMLOpenTagdiv class="input-form [&.has-error_.form-control]:border-danger"HTMLCloseTag
HTMLOpenTaglabel
data-tw-merge
for="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 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 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 [&.has-error_.form-control]:border-danger"HTMLCloseTag
HTMLOpenTaglabel
data-tw-merge
for="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 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 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 [&.has-error_.form-control]:border-danger"HTMLCloseTag
HTMLOpenTaglabel
data-tw-merge
for="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 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 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 [&.has-error_.form-control]:border-danger"HTMLCloseTag
HTMLOpenTaglabel
data-tw-merge
for="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 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 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 [&.has-error_.form-control]:border-danger"HTMLCloseTag
HTMLOpenTaglabel
data-tw-merge
for="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 [&[type='file']]:border file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 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 [&.has-error_.form-control]:border-danger"HTMLCloseTag
HTMLOpenTaglabel
data-tw-merge
for="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 [&.has-error_.form-control]:border-danger",
errorClass: "has-error",
errorTextParent: "input-form [&.has-error_.form-control]:border-danger",
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);
});
});