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.

  • 1
    Bootstrap 4.x documentation covers this under Validation: getbootstrap.com/docs/4.0/components/forms/#how-it-works though at the risk of veering into opinion; bootstrap plugins like Validator handle it 'better'. – Robert Jan 10 at 16:36
  • Yep, I saw it, but I am more interested in regex itself. – Pavel Jan 10 at 18:34
  • Since Bootstrap just relies on the JavaScript Validation API for this you'll probably need to familiarize yourself with that API. – Robert Jan 10 at 18:37
  • You mean this one formvalidation.io? – Pavel Jan 10 at 18:41
  • 1
    I mean that's certainly an option but no that's not the JavaScript Validation API (which is a core part of JavaScript). That's a jQuery plugin. CSS-Tricks has an article on using the API: css-tricks.com/… – Robert Jan 10 at 18:43

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._%+-][email protected][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>

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.