How do I validate email in form with bootstrap

Question

So I want to validate if the email submitted is valid. Tried to make it work with bootstrap because I have to use it.

Here's the codepen: 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>

https://stackoverflow.com/a/50577660/8298248 Try this. I would recommend you to google once before you ask the question. — bhanu, Jun 05 '21 at 19:27

score 0 · Answer 1 · answered Jun 05 '21 at 19:41

Found a working solution with some javascript tricks. Try this

(() => {
    '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/bootstrap@5.0.1/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>

score -2 · Answer 2 · answered Jun 05 '21 at 19:43

-2

Use input with type:email can help you.

answered Jun 05 '21 at 19:43

moslem hosseinpour

1

How do I validate email in form with bootstrap

2 Answers2