What is the best way to verify an email address within a form using bootstrap styling

Question

What is the best way to verify an email address within a form using bootstrap styling

Looking to validate the submitted email for accuracy. Attempting to implement this validation using Bootstrap due to requirements.

Please review the codepen here: https://codepen.io/yytimo/pen/ExWLbLd

<div class="col-md-4">
                   <div class="form-outline">
                     <input
                       type="text"
                       class="form-control"
                       id="validationCustomEmail"
                       value=""
                       required
                     />
                     <label for="validationCustomEmail" class="form-label">E-Mail</label>
                     <div class="valid-feedback">Looks good!</div>
                     <div class="invalid-feedback">Enter valid e-mail.</div>
                   </div>
</div>

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Discovered a functional solution utilizing some clever JavaScript techniques. Give this a try:

(() => {
    'use strict';
    const forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms).forEach((form) => {
      form.addEventListener('submit', (event) => {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
var email = document.getElementById('validationCustomEmail');
  email.oninput = () => {
    const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    if(!re.test(email.value)){
      email.setCustomValidity("Invalid field.");
      email.classList.add('is-invalid');
    } else {
      email.classList.remove('is-invalid'); 
      email.setCustomValidity("")
    }
  }
  }

)();

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9a819f819e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="row g-3 needs-validation" novalidate>
                <div class="col-md-4">
                  <div class="form-outline">
                    <input
                      type="text"
                      class="form-control"
                      id="validationCustom01"
                      value="Mark"
                      required
                    />
                    <label for="validationCustom01" class="form-label">First name</label>
                    <div class="valid-feedback">Looks good!</div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-outline">
                    <input
                      type="text"
                      class="form-control"
                      id="validationCustom02"
                      value="Otto"
                      required
                    />
                    <label for="validationCustom02" class="form-label">Last name</label>
                    <div class="valid-feedback">Looks good!</div>
                  </div>
                </div>
                <div class="col-md-4">
                    <div class="form-outline">
                      <input
                        type="text"
                        class="form-control"
                        id="validationCustomEmail"
                        value=""
                        required
                      />
                      <label for="validationCustomEmail" class="form-label">E-Mail</label>
                      <div class="valid-feedback">Looks good!</div>
                      <div class="invalid-feedback">Enter valid e-mail.</div>
                    </div>
                  </div>
                <div class="col-md-6">
                  <div class="form-outline">
                    <input type="text" class="form-control" id="validationCustom03" required />
                    <label for="validationCustom03" class="form-label">City</label>
                    <div class="invalid-feedback">Please provide a valid city.</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-outline">
                    <input type="text" class="form-control" id="validationCustom05" required />
                    <label for="validationCustom05" class="form-label">Zip</label>
                    <div class="invalid-feedback">Please provide a valid zip.</div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-check">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      value=""
                      id="invalidCheck"
                      required
                    />
                    <label class="form-check-label" for="invalidCheck">
                      Agree to terms and conditions
                    </label>
                    <div class="invalid-feedback">You must agree before submitting.</div>
                  </div>
                </div>
                <div class="col-12">
                  <button class="btn btn-primary" type="submit">Submit form</button>
                </div>
              </form>

Answer 2

Discovered a functional solution utilizing some clever JavaScript techniques. Give this a try:

(() => {
    'use strict';
    const forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms).forEach((form) => {
      form.addEventListener('submit', (event) => {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
var email = document.getElementById('validationCustomEmail');
  email.oninput = () => {
    const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    if(!re.test(email.value)){
      email.setCustomValidity("Invalid field.");
      email.classList.add('is-invalid');
    } else {
      email.classList.remove('is-invalid'); 
      email.setCustomValidity("")
    }
  }
  }

)();

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9a819f819e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="row g-3 needs-validation" novalidate>
                <div class="col-md-4">
                  <div class="form-outline">
                    <input
                      type="text"
                      class="form-control"
                      id="validationCustom01"
                      value="Mark"
                      required
                    />
                    <label for="validationCustom01" class="form-label">First name</label>
                    <div class="valid-feedback">Looks good!</div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-outline">
                    <input
                      type="text"
                      class="form-control"
                      id="validationCustom02"
                      value="Otto"
                      required
                    />
                    <label for="validationCustom02" class="form-label">Last name</label>
                    <div class="valid-feedback">Looks good!</div>
                  </div>
                </div>
                <div class="col-md-4">
                    <div class="form-outline">
                      <input
                        type="text"
                        class="form-control"
                        id="validationCustomEmail"
                        value=""
                        required
                      />
                      <label for="validationCustomEmail" class="form-label">E-Mail</label>
                      <div class="valid-feedback">Looks good!</div>
                      <div class="invalid-feedback">Enter valid e-mail.</div>
                    </div>
                  </div>
                <div class="col-md-6">
                  <div class="form-outline">
                    <input type="text" class="form-control" id="validationCustom03" required />
                    <label for="validationCustom03" class="form-label">City</label>
                    <div class="invalid-feedback">Please provide a valid city.</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-outline">
                    <input type="text" class="form-control" id="validationCustom05" required />
                    <label for="validationCustom05" class="form-label">Zip</label>
                    <div class="invalid-feedback">Please provide a valid zip.</div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-check">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      value=""
                      id="invalidCheck"
                      required
                    />
                    <label class="form-check-label" for="invalidCheck">
                      Agree to terms and conditions
                    </label>
                    <div class="invalid-feedback">You must agree before submitting.</div>
                  </div>
                </div>
                <div class="col-12">
                  <button class="btn btn-primary" type="submit">Submit form</button>
                </div>
              </form>

Answer 3

Answer №2

Employing the input type "email" can be beneficial for you.

Answer 4

Employing the input type "email" can be beneficial for you.

What is the best way to verify an email address within a form using bootstrap styling

Answer №1

Answer №2

Similar questions

Tips for resolving issues with media queries in CSS

Transferring content from a div class to an input class

What is the best way to create a slideshow using an IFrame?

Looking to maintain the value of a toggle button in a specific state depending on certain condition checks

Is it possible to utilize the ternary operator to handle classnames when working with CSS modules?

Applying the document height to window height ratio to create a scale ranging from 1 to 100

Hide only the table that is being clicked on, not all tables

Is there a way to show escaped html code on the blog editing page?

Is it possible to gradually open or close a div element?

Inherit margins from child elements with fixed positions

Pattern for identifying Google Earth links with regular expressions

Updating the source of an image without having to refresh the entire webpage

Transfer or duplicate an SVG image from the bottom div to the top div

"Components in Vue remain consistent in their behavior regardless of the various calls made to

The refreshed Google Chrome cache post-update on the Developer Dashboard

Tips for inserting a personalized image or icon into the ANTD Design menu

Whenever I hit the refresh button, `$locationprovider.html5mode` seems to deactivate my CSS styling

Determining the primary image in Galleriffic

Implementing yadcf and a fixed column filter in a Bootstrap datatable

"Enhance your website with the dynamic Twitter Bootstrap dropdown navigation