SOW : Form validation

                  
		                <form novalidate class="bs-validate" 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>
                  
                

                  
		                <form novalidate class="bs-validate" 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>
                  
                

                  
		                <form novalidate class="bs-validate" 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>
                  
                

                  
		                <form novalidate class="bs-validate" method="get" action="#">

		                  <div class="mb-3">
		                    <input type="text" name="test_optional" placeholder="optional field" class="form-control">
		                    <div class="valid-feedback">Looks good!</div>
		                    <div class="invalid-feedback">Sorry, invalid!</div>
		                  </div>

		                  <div class="mb-3">
		                    <input required="" type="email" name="test_required" placeholder="required field" class="form-control">
		                    <div class="valid-feedback">Looks good!</div>
		                    <div class="invalid-feedback">Sorry, invalid!</div>
		                  </div>

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