I successfully created a script to validate my Bootstrap 4 form, but I'm facing an issue where the error message is replacing the input field. Should I pursue validating BS4 with Vanilla JS or stick to using Bootstrap validation? What's the industry best practice for this scenario? This is my first time working on form validation.
Check out the fiddle here:
https://jsfiddle.net/wunrsjdy/
HTML:
<div class="container">
<div id="form">
<h1 class="page-title">Want To Be Our Client? Fill Out the Questionnaire Below</h1>
<form id="form-user" action ="#" method="POST">
<div class="form-group" id='errorTeste'>
<label for="name">Company Name</label>
<input type="text" class="form-control" id="name" name= "name" placeholder="">
</div>
<button type="submit" class="btn btn-primary" id="button-send">Submit</button>
</form>
</div>
JS
const name = document.getElementById('name')
const form = document.getElementById('form-user')
const errorElement = document.getElementById('errorTeste')
form.addEventListener('submit', (e) => {
let messages = []
if (name.value === '' || name.value == null) {
messages.push('Please enter your company name.')
}
if (messages.length > 0) {
e.preventDefault()
errorElement.innerText = messages.join(', ')
}
})