I am currently working on creating a form. I want to implement a feature where incorrect data entered will be highlighted in red, and correct data entered will be highlighted in green.
This is the code snippet from my .js file:
function checkForm()
{
var error=false;
var contactName = document.getElementById("contactName");
var contactLastName = document.getElementById("contactLastName");
var contactEmail = document.getElementById("contactEmail");
var contactInfo = document.getElementById("contactInfo");
if (contactName.value == "")
{
document.getElementById('errorName').className='alert alertdanger';
error=true;
}
// Similar validation checks for other fields
if (!error)
return true;
else
{
return false;
}
}
Here is the form markup:
<form action="index.html#kontakt" method="post" onsubmit="return checkForm();">
<fieldset>
<!-- Form fields with error messages -->
</fieldset>
</form>
In Bootstrap 3.4.1, I used to simply add this line in my .js file:
document.getElementById("error1").className="form-group has-error";
Now using Bootstrap 4, what is the equivalent of "form-group has-error"?
Furthermore, how can I make the form fields validate the input immediately without submitting the form first?