I'm currently working on validating a form field in Bootstrap 4.4. The goal is to not only check if the field is filled out, but also to ensure that it contains a valid URL. This URL can be an internal link, a hostname, or an IP address. However, it must be entered in the format of or , and not just XXXXX.com. The code I have right now is not performing the validation correctly.
Here is the initial HTML form I am working with:
<form method="post" class="needs-validation">
<div class="input-group">
<INPUT TYPE="TEXT" class="form-control validationUrl" PLACEHOLDER="http://yourwebsite" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Must begin with http
</div>
<div class="input-group-append">
<INPUT TYPE=SUBMIT class="btn btn-primary" VALUE="GO">
</div>
</div>
</form>
This form currently prevents submission if left blank. I am aiming to validate that the submitted value is not empty and is a valid URL starting with http.
One helpful resource I found is a Stack Overflow post on URL validation code: JS Regex url validation which provides the following code:
function isUrlValid(userInput) {
var res = userInput.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
if(res == null)
return false;
else
return true;
}
I have also incorporated Bootstrap's validation code from their documentation page: https://getbootstrap.com/docs/4.0/components/forms/
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
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);
})();
</script>
I have tried to modify the code to include URL validation, but it is not functioning as expected. It is allowing any input to be submitted without validation.
Here is the current code I am working on:
<form method="post" class="needs-validation">
<div class="input-group">
<INPUT TYPE="TEXT" class="form-control validationUrl" PLACEHOLDER="http://yourwebsite" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Must begin with http
</div>
<div class="input-group-append">
<INPUT TYPE=SUBMIT class="btn btn-primary" VALUE="GO">
</div>
</div>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('validationUrl');
var res = userInput.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(res, function(res) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>