I have been working on my new application and I use JQuery,HTML5 and Bootstrap 3 to develop my front end pages. However, in all the form in my app I need to show the message to the user after they submit the form. I tried to do the research and see what is the best way to do that but there is a lot of different opinions/options. Here is my example:
$('#frmSave').on('submit', submitFrm);
function submitFrm(e) {
e.preventDefault(); // Prevnts default form submit.
var frmID = e.target.id,
formData = $('#' + frmID).serialize();
$('#' + frmID).find(':submit').prop('disabled', true); // Disable submit button
if (formData) {
$('#frm_message').show().addClass('alert-success').html('Record successully saved!').delay(7000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-success').dequeue();
$('#' + frmID).find(':submit').prop('disabled', false);
});
} else {
$('#frm_message').show().addClass('alert-danger').html('Error!').delay(7000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-danger').dequeue();
$('#' + frmID).find(':submit').prop('disabled', false);
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="active"><span class="label label-primary">Active:</span></label>
<select class="form-control" name="frm_active" id="frm_active" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
<input type="text" class="form-control" name="frm_code" id="frm_code" maxlength="4" required>
</div>
<div class="form-group">
<label class="control-label" for="name"><span class="label label-primary">Name:</span></label>
<input type="text" class="form-control" name="frm_name" id="frm_name" maxlength="50" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frm_message" class="alert alert-Submit"></div>
</div>
</div>
</form>
While I was researching on the web I noticed that some application do not use time out for the message. They simple just leave the message on the form. To me that was bit confusing and I do not see a purpose of leaving that message on the screen. I use the timer and message disappears after 7 seconds. I'm wondering if there is better way to do this? Or the way I'm doing is one of the ways to go.
Related
I have 2 forms on page. And I want to add confirm for users if they change their profile information and wish to leave the page without saving information. I use jQuery.
I want to show the modal window with two buttons - leave the page and stay on the page
Also when the user clicks on the save button - the page reloads. But I don't need to show confirmation if user clicks on save button. Only if user wants to leave the page without saving profile info
first form
<div class="form-group">
<input autocomplete="off" type="text" required="" class="form-control" value="candidate77" name="cand_name" placeholder="Write Full Name">
<input class="file-caption-name" placeholder="Select file">
<select class="select-generat form-control select2-hidden-accessible" name="cand_salary_type" tabindex="-1" aria-hidden="true">
<option value="34" selected="selected">Monthly</option>
<option value="35">Weekly</option>
<option value="36">Hourly</option>
<option value="37">Yearly</option>
</select>
<textarea name="cand_intro" data-parsley-error-message="Feild is required" class="form-control rich_textarea" cols="30" rows="10" data-origin="textarea">1231</textarea>
<input type="submit" value="Save Information" class="btn n-btn-flat cand_person_save">
</div>
second form
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="row">
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
<div class="form-group">
<div id="dropzone" class="dropzone dz-clickable">
<div class="dz-default dz-message"><span>undefined</span></div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label>Video url (only youtube)</label>
<input type="text" placeholder="Put youtube video link" value="" name="cand_video" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12">
<input type="submit" value="Save Portfolio" class="btn n-btn-flat">
</div>
modal form
<div id="openModal" class="modalDialog">
<div>
X
<h2>Are you sure you want to leave this page?</h2>
<p>please save updates</p>
</div>
Leave page
Stay on page
</div>
Jquery code
$(document).ready(function(){
var is_changed = 0;
$(".form-control").on("input", function(){
is_changed = 1;
});
//textarea
$('rich_textarea').on('input propertychange paste', function() {
is_changed = 1;
});
//dropzone
$(".dropzone").on('click', function(){
is_changed = 1;
});
window.onbeforeunload = confirmExit;
function confirmExit() {
if (is_changed == 1) {
$('#openModal').show();
}
}
});
I know this was already answered somehow here on stackoverflow but I couldn't find a solution yet. I am using bootstrap to style my html, the problem is when I try to visualize it in the browser(safari and chrome) or in the previewer in Visual Studio Code, it only shows the raw html. I've been all day trying different stuff but I can't find the answer. When I deploy it to a local server, it works.
How the files are organized:
Raw HTML:
Code for adduser.html:
<div class="adduser">
<h2>Add user</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label" for="inputUsername">Username</label>
<div class="controls">
<div class="input-group col-lg-5">
<span class="input-group-addon">#</span> <input type="text"
class="inputUsername form-control"
placeholder="Username (e-mail address)">
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label" for="inputName">Name</label>
<div class="controls col-lg-5">
<input type="text" class="inputName form-control" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label" for="inputName">Type</label>
<div class="controls col-lg-5">
<select class="selectType form-control">
<option value="ADMIN">Administrator</option>
<option value="USER">User</option>
<option value="READ_ONLY">Read only</option>
</select>
</div>
</div>
<div class="form-group">
<div class="controls buttonBar">
<button type="button" class="btn btn-primary addButton">Add</button>
</div>
</div>
</form>
<script>
function AddUser(main) {
var othis = this;
this.close = function(){
};
this.show = function(){
};
this.addUser = function() {
Global.bimServerApi.call("ServiceInterface", "addUser", {
username: $(".adduser .inputUsername").val(),
name: $(".adduser .inputName").val(),
type: $(".adduser .selectType").val(),
selfRegistration: false,
resetUrl: Global.baseDir + "?page=ResetPassword"
}, function(data){
main.showUser(data);
});
};
$(".adduser .addButton").click(othis.addUser);
$(".adduser .inputName").keypress(function(event){
if (event.which == 13) {
event.preventDefault();
othis.addUser();
}
});
$(".adduser .inputUsername").focus();
}
</script>
Your question is very vague. But I feel like you have included bootstrap in your HTML file as a script tag, but you have not added the bootstrap classes to your elements.
For more info, read:
https://getbootstrap.com/docs/4.0/getting-started/introduction/
I have an application with multiple tabs/form that will be submitted. Instead of having separate submit function for each form I want to design one dynamic function that will submit any form with submitFrm class. Here is an example of my current code:
$('.frmSubmit').on('submit', submitFrm);
function submitFrm(e) {
e.preventDefault(); // Prevnts default form submit.
var frmID = $(this).prop("id"),
formData = $('#' + frmID).serialize(), //or this way $(this).serialize()
submitBtn = $(this).find(':submit');
if (formData) {
$('#' + frmID).find(':submit').prop('disabled', true); // Disable submit button
// or this submitBtn.prop('disabled', true);
/*
Here is AJAX call.
*/
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frmTab1" id="frmTab1" class="frmSubmit" autocomplete="off">
<div class="form-group">
<label class="control-label" for="activ"><span class="label label-primary">Active:</span></label>
<select class="form-control" name="frmTab1_active" id="frmTab1_active" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
<input type="text" class="form-control" name="frmTab1_code" id="frmTab1_code" maxlength="4" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frmTab1_submit" id="frmTab1_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="message" class="alert message-submit"></div>
</div>
</div>
</form>
I'm debating should I use $(this) object to find(), serialize() form data or I should use form id? Is there any difference? I'm also wondering if I use this function from multiple forms to submit data is that good practice? If anyone has any suggestions please let me know.
You could use simply $(this).serialize() like :
$('.frmSubmit').on('submit', submitFrm);
function submitFrm(e) {
e.preventDefault();
var formData = $(this).serialize();
var submitBtn = $(this).find(':submit');
if (formData) {
submitBtn.prop('disabled', true);
}
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frmTab1" id="frmTab1" class="frmSubmit" autocomplete="off">
<div class="form-group">
<label class="control-label" for="activ"><span class="label label-primary">Active:</span></label>
<select class="form-control" name="frmTab1_active" id="frmTab1_active" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
<input type="text" class="form-control" name="frmTab1_code" id="frmTab1_code" maxlength="4" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frmTab1_submit" id="frmTab1_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="message" class="alert message-submit"></div>
</div>
</div>
</form>
I have form where used can enter zip code and based on that City and State will be automatically populated. So these three fields are in the same form next to each other. Here is example of my form:
$('.get-zip').keyup(getZipCode);
function getZipCode(){
var fldZip = $(this);
console.log($(this).closest('.form-group'));
if(fldZip.val().length === 5 && fldZip.val().match(/^[0-9]+$/)) {
//Send Ajax request and populate closest State and City fields.
}else{
//$(cityID).val('');
//$(stateID).val('');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="city"><span class="label label-primary">City:</span></label>
<input type="text" class="form-control city" name="frm_city" id="frm_city" maxlength="50" placeholder="City auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="state"><span class="label label-primary">State:</span></label>
<input type="text" class="form-control state" name="frm_state" id="frm_state" maxlength="2" placeholder="State auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="zip"><span class="label label-primary">Zip:</span></label>
<input type="text" class="form-control get-zip" name="frm_zip" id="frm_zip" maxlength="5" placeholder="Enter 5 digits ZIP code" pattern="[0-9]{5}$" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmSave_message"></div>
</div>
</div>
</form>
This function is used in few other forms in my application so I need this to work in any form. I'm wondering what is the easiest way to populate State and City that are above Zip input field? I tried to use closest() but that won't work since I need to specify which input exactly I need to populate. If anyone have better idea on how to achieve this please let me know. Thank you.
This will always post to the nearest input forms of state and city!
Hope I helped!
$('.get-zip').keyup(getZipCode);
function getZipCode(){
var fldZip = $(this);
// Testing Purpose
$(this).closest("form").find(".state").val($(this).val());
$(this).closest("form").find(".city").val($(this).val());
if(fldZip.val().length === 5 && fldZip.val().match(/^[0-9]+$/)) {
$(this).closest("form").find(".state").val("YOUR VALUE");
$(this).closest("form").find(".city").val("YOUR VALUE");
}else{
//$(cityID).val('');
//$(stateID).val('');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="city"><span class="label label-primary">City:</span></label>
<input type="text" class="form-control city" name="frm_city" id="frm_city" maxlength="50" placeholder="City auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="state"><span class="label label-primary">State:</span></label>
<input type="text" class="form-control state" name="frm_state" id="frm_state" maxlength="2" placeholder="State auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="zip"><span class="label label-primary">Zip:</span></label>
<input type="text" class="form-control get-zip" name="frm_zip" id="frm_zip" maxlength="5" placeholder="Enter 5 digits ZIP code" pattern="[0-9]{5}$" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmSave_message"></div>
</div>
</div>
</form>
The following may work as long as all the different forms have the elements arranged in the same way.
jQuery .prev()
jQuery .find()
var stateFormGroup = $(this).closest('.form-group').prev();
var stateElement = stateFormGroup.find('input');
var cityElement = stateFormGroup.prev().find('input');
Posting the comment here as answer.
$(this).closest('.form-group') will select the parent form-group. Try selecting the closest form and then traverse down to the form groups.
$form_group = $(this).closest('form').find('.form-group');
$form_group.find('input.city').val(city);
$form_group.find('input.state').val(state);
I'm a beginner with bootstrap and I have seen a lot of bootstrap 3 form validation plugins etc, but I haven't found any for bootstrap 4.
I'm trying to validate multiple forms, and here is my code:
<!-- Contact -->
<div class="container white">
<div class="row">
<div class="container white percent100">
<div class="col-lg-12">
<div class="padder-t2">
<h1>Contact</h1>
<div class="horiz-divider"></div>
</div>
</div>
</div>
</div>
<div class="row padder-t padder-b">
<div class="container white">
<div class="col-lg-12">
<!-- Form -->
<form class="form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Text input-->
<div class="form-group">
<div class="row">
<div class="col-md-4 col-lg-4">
<label class="control-label pull-right"><h4>First Name</h4></label>
</div>
<div class="col-md-4 col-lg-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input id="firstname" name="firstname" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="row">
<div class="col-md-4 col-lg-4">
<label class="control-label pull-right"><h4>Last Name</h4></label>
</div>
<div class="col-md-4 col-lg-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input id="lastname" name="lastname" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="row">
<div class="col-md-4 col-lg-4">
<label class="control-label pull-right"><h4>E-Mail</h4></label>
</div>
<div class="col-md-4 col-lg-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input id="email" name="email" placeholder="E-Mail Address" class="form-control" type="email">
</div>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="row">
<div class="col-md-4 col-lg-4">
<label class="control-label pull-right"><h4>Phone #</h4></label>
</div>
<div class="col-md-4 col-lg-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input id="phone" name="phone" placeholder="Phone" class="form-control" type="text">
</div>
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<div class="row">
<div class="col-md-4 col-lg-4">
<label class="control-label pull-right"><h4>Message</h4></label>
</div>
<div class="col-md-4 col-lg-5 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<textarea id="comment" class="form-control" name="comment" placeholder="Your Message"></textarea>
</div>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="fa fa-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
<!-- Button -->
<div class="form-group">
<div class="row">
<label class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-4 col-lg-4">
<button type="submit" class="btn btn-danger raised">Send <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="row padder-b">
<div class="row col-lg-12">
<div class="col-md-3 col-lg-3"></div>
<h4 class="col-md-9 col-lg-9">Contact us directly:</h4>
</div>
<div class="row col-lg-12">
<div class="col-md-3 col-lg-3"></div>
<h4 class="col-md-2 col-lg-2 padder-lr">Mail:</h4>
<a class="col-md-6 col-lg-6 padder-lr" href="mailto:lorem#ipsum.com">
<h4 id="mail">lorem#ipsum.com</h4>
</a>
</div>
<div class="row col-lg-12">
<div class="col-md-3 col-lg-3"></div>
<h4 class="col-md-2 col-lg-2 padder-lr">Adress:</h4>
<h4 class="col-md-6 col-lg-6 padder-lr" id="adress">2 LoremIpsum Road, 67000 City - Country</h4>
</div>
</div>
</div>
I have tried to modify existing js, but I had no luck.
Here is the rendered form:
jsfiddle of the form
First I solved my issue with an external library like Jonathan Dion suggested. But recently I came across this :
Bootstrap v4.0 introduced their own form validation that you can still pair with backend php validation. From the Doc :
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Doesn't look good!
</div>
</div>
</div>
</div>
Then using JS :
<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>
This provides input border colorating and displays the valid / invalid feedback blocks according to the given pattern or properties. It is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
Update 2020 - Bootstrap 4.4.x
Here's another option (modern JS) if you want to validate each input one at a time (live or real-time) instead of waiting for the entire form to be submitted...
(function() {
'use strict';
window.addEventListener('load', function() {
// fetch all the forms we want to apply custom style
var inputs = document.getElementsByClassName('form-control')
// loop over each input and watch blur event
var validation = Array.prototype.filter.call(inputs, function(input) {
input.addEventListener('blur', function(event) {
// reset
input.classList.remove('is-invalid')
input.classList.remove('is-valid')
if (input.checkValidity() === false) {
input.classList.add('is-invalid')
}
else {
input.classList.add('is-valid')
}
}, false);
});
}, false);
})()
<form class="container" novalidate="" action="/echo" method="POST" id="myForm">
<div class="form-group">
<label class="form-control-label" for="input1">Enter some input</label>
<input type="text" class="form-control" name="input1" id="input1"
autocomplete="no" required>
<div class="valid-feedback">Success! You've done it.</div>
<div class="invalid-feedback">No, you missed this one.</div>
</div>
<div class="form-group">
<label class="form-control-label" for="input2">Enter password</label>
<input type="text" class="form-control"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$"
autocomplete="no" name="input2" id="input2">
<div class="valid-feedback">Nice! You got this one!</div>
<div class="invalid-feedback">At least 6 chars: 1 uppercase, 1 lowercase and numeric</div>
</div>
<div>
<button type="submit" class="btn btn-secondary" id="btnSubmit">Submit</button>
</div>
</form>
https://codeply.com/p/mzBNbAlOvQ
You can use any library available on the web. You may try jqueryvalidation. It's pretty easy to use, just read the documentation.
Add the required attribute on your input and jqueryvalidation will do the job. For styling, you can add your own CSS and make it look like bootstrap.
Hopes it help
$(document).ready(function(){
$('#contact_form').validate()
})
Demo
I found a simpler and a bit more modern way to implement Bootstrap 4 JS Form validation:
Note: Keep in mind that each <form> element must have the novalidate attribute and at the same time, each <input> element in it must have the required attribute.
// Upon load..
window.addEventListener('load', () => {
// Grab all the forms
var forms = document.getElementsByClassName('needs-validation');
// Iterate over each one
for (let form of forms) {
// Add a 'submit' event listener on each one
form.addEventListener('submit', (evt) => {
// check if the form input elements have the 'required' attribute
if (!form.checkValidity()) {
evt.preventDefault();
evt.stopPropagation();
console.log('Bootstrap will handle incomplete form fields');
} else {
// Since form is now valid, prevent default behavior..
evt.preventDefault();
console.info('All form fields are now valid...');
}
form.classList.add('was-validated');
});
}
});
<!-- Load necessary libraries -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Add form -->
<div class="container" style="padding-top: 40px;">
<form class="student-search needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-6">
<label for="input-name-search" class="sr-only">Name</label>
<input type="text" class="form-control" id="input-name-search" placeholder="Name" required>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Enter a name please.</div>
</div>
<div class="col-6">
<button id="btn-search" type="submit" class="btn btn-success btn-block">Search student</button>
</div>
</div>
</form>
</div>
I just figured out the reason my code wasn't validating: I didn't have a submit button to trigger the validation. Make sure to have it.
<button type="submit" class="btn btn-primary">Save</button>
There's no real need for a library here, you can use the native reportValidation() method: MDN. You can call it on individual inputs or on the entire form itself.