Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap email validation

I'm using Bootstrap to validate email address:

<form id="..." novalidate>
...
<div class="form-group">
    <input type="email" class="form-control" id="..." required/>
        <div class="invalid-feedback">
            Please provide a valid email.
        </div>
</div>
...
</form>

I'm using novalidate property to allow Bootstrap validate email itself. My HTML contains both Bootstrap CSS and JS refs. Everything works fine.

But I have couple of questions:

  1. How bootstrap validates email regex? Where can I find code responsible for this (I've tried to look at srcs...)?
  2. Can I override regex that is used for validation (would be nice to do this without Bootstrap original code modification)?

Thanks in advance.

like image 885
Pavel Avatar asked Jan 10 '18 16:01

Pavel


1 Answers

Its a late answer, but for those wants to know the answer for second question. Here is the sample code, I tried and was successful. Basically you can add "pattern" attribute to the input field.

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>



<form class="row position-relative flex-column needs-validation" novalidate>
          <input type="email" name="email" placeholder="Your email ID.." class="email white col-7 col-md-4 col-lg-7 ml-3 form-control" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
          <div class="valid-feedback feedback-pos">
            Looks good!
          </div>
          <div class="invalid-feedback feedback-pos">
            Please input valid email ID
          </div>
          <button type="submit" class="btn btn-danger text-uppercase sbmt-btn col-3 col-md-2 col-lg-4 ml-1" value="validate">Submit</button>
        </form>
like image 124
AKNair Avatar answered Sep 22 '22 13:09

AKNair