SOW : Core Plugins

SOW = Step Of Web (Smarty author).
SOW plugins are part of Smarty Core, written from scratch!

SOW : Form Validation

Simple form validation using Bootstrap states.


/* 
	:: Plugin File
	src/js/sow.core/sow.form_validate.js

	:: Plugin Init
*/	$.SOW.core.form_validate.init('form.bs-validate');

Simple/Basic

<!--
Required:
	class="bs-validate" novalidate
	data-error-scroll-up="true"	 = scroll up to error
-->
<form class="bs-validate" novalidate method="get" action="#" data-error-scroll-up="true">

	<input type="text" name="test_optional" placeholder="optional field" class="form-control mb-3">
	<input required="" type="email" name="test_required" placeholder="required field" class="form-control mb-3">

	<button type="submit" class="btn btn-primary">Submit</button>
</form>

Using Toast

<!-- 

	1. USING TOAST ERROR 

		:: Params:
		data-error-toast-text="<i class='fi fi-circle-spin fi-spin float-start'></i> Please, complete all required fields!" 
		data-error-toast-delay="3000" 
		data-error-toast-position="top-center|top-left|top-right|bottom-center|bottom-left|bottom-right"

		data-error-scroll-up="true"	 = scroll up to error
-->
<form 
	class="bs-validate" novalidate 
	method="get" 
	action="#" 

	data-error-scroll-up="true" 
	data-error-toast-text="<i class='fi fi-circle-spin fi-spin float-start'></i> Please, complete all required fields!" 
	data-error-toast-delay="3000" 
	data-error-toast-position="top-center">

	<input type="text" name="test_optional" placeholder="optional field" class="form-control mb-3">
	<input required="" type="email" name="test_required" placeholder="required field" class="form-control mb-3">

	<button type="submit" class="btn btn-primary">Submit</button>
</form>

Using Additional Alert

<!--
	data-error-scroll-up="true"	 = scroll up to error
-->
<form class="bs-validate" novalidate method="get" action="#" data-error-scroll-up="true">

	<input type="text" name="test_optional" placeholder="optional field" class="form-control mb-3">
	<input required="" type="email" name="test_required" placeholder="required field" class="form-control mb-3">

	<!-- 
		Error Notice - additional, more visible
	-->
	<div class="bs-validate-info hide alert alert-danger" data-error-alert-delay="4000">
		<i class="fi fi-circle-spin fi-spin float-start"></i> 
		Please, complete all required fields!
	</div>

	<button type="submit" class="btn btn-primary">Submit</button>
</form>

Jump To