xxxxxxxxxx1
<form class="needs-validation" novalidate>2
<!-- Material input -->3
<div class="md-form m-5">4
<input type="tel" id="form1" class="form-control" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" required>5
<label for="form1">Tel/phone</label>6
</div>7
8
<div class="md-form m-5">9
<input type="text" id="form2" class="form-control">10
<label for="form2">Example label</label>11
</div>12
<button class="btn btn-primary btn-sm btn-rounded mx-5" type="submit">Submit form</button>13
</form>1
1
xxxxxxxxxx1
(function() {2
'use strict';3
window.addEventListener('load', function() {4
// Fetch all the forms we want to apply custom Bootstrap validation styles to5
var forms = document.getElementsByClassName('needs-validation');6
// Loop over them and prevent submission7
var validation = Array.prototype.filter.call(forms, function(form) {8
form.addEventListener('submit', function(event) {9
if (form.checkValidity() === false) {10
event.preventDefault();11
event.stopPropagation();12
}13
form.classList.add('was-validated');14
}, false);15
});16
}, false);17
})(); Console errors: 0