Forms
The example below utilizes the Skin.Form.getPromise function. In addition, PristineJS is also used.
Examples are given for utilizing alerts and toasts to display messages.
<form id="form-example" method="post" action="./form-example-data.json">
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="col-span-2 md:col-span-1">
<div class="form-group">
<label class="tc-form-label mb-1 text-sm font-medium" for="input-name">Name</label>
<input type="text"
id="input-name"
name="name"
class="tc-form-input"
placeholder="Name"
data-pristine-required-message="Name is required"
required>
</div>
</div>
<div class="col-span-2 md:col-span-1">
<div class="form-group">
<label class="tc-form-label mb-1 text-sm font-medium" for="input-email">Email</label>
<input type="email"
id="input-email"
name="email"
class="tc-form-input"
placeholder="Email"
data-pristine-required-message="Email is required"
data-pristine-email-message="Enter a valid email"
required>
</div>
</div>
<div class="col-span-2 md:col-span-1">
<button id="form-example-submit" class="tc-btn tc-style-default focus:tu-ring-info">Submit</button>
</div>
<div class="col-span-2 md:col-span-1">
<!-- Alert placeholder -->
<div id="form-example-alert" class="font-medium tc-alert tc-alert-alt" role="alert" data-hidden="true">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
</svg>
</div>
<!-- Content -->
<div id="form-example-alert-content" class="grow"></div>
</div>
</div>
</div>
</div> <!-- /.grid -->
<!-- Toast placeholder -->
<div id="toast-container" class="tc-toast-container tc-toast-container-br"></div>
</form>
<script src="https://cdn.jsdelivr.net/npm/pristinejs@1.0.0/dist/pristine.min.js"></script>
<script>
const btn = document.getElementById("form-example-submit");
btn.addEventListener("click", function (event) {
event.preventDefault();
const formEl = document.getElementById("form-example");
const pristine = new Pristine(formEl);
if (pristine.validate()) {
btn.disabled = true;
const submitBtnHtml = btn.innerHTML;
btn.innerHTML = '<svg class="animate-spin mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Loading...';
Skin.Form.getPromise(formEl).then(json => {
btn.disabled = false;
btn.innerHTML = submitBtnHtml;
pristine.reset();
formEl.reset();
// Do something with the response...
console.log(json);
// Toast
Skin.Toast.create({
containerId: "toast-container",
classes: "tc-style-success mt-2",
innerHTML: "Success!",
hideAfter: 3000
});
// End toast
// Alert
const formAlert = document.getElementById("form-example-alert");
const formAlertContent = document.getElementById("form-example-alert-content");
formAlert.classList.add("tc-style-success-light");
formAlertContent.innerHTML = "Success!";
Skin.Visibility.showThenHide(formAlert, 3000, 250);
window.setTimeout(() => {
formAlert.classList.remove("tc-style-success-light");
formAlertContent.innerHTML = "";
}, 3250);
// End alert
});
} else {
// Toast
Skin.Toast.create({
containerId: "toast-container",
classes: "tc-style-error mt-2",
innerHTML: "Form not valid...",
hideAfter: 3000
});
// End toast
// Alert
const formAlert = document.getElementById("form-example-alert");
const formAlertContent = document.getElementById("form-example-alert-content");
formAlert.classList.add("tc-style-error-light");
formAlertContent.innerHTML = "Form not valid...";
Skin.Visibility.showThenHide(formAlert, 3000, 250);
window.setTimeout(() => {
formAlert.classList.remove("tc-style-error-light");
formAlertContent.innerHTML = "";
}, 3250);
// End alert
}
});
</script>