1. I am creating a form validation everything fine, but when an error occurred during the form submission it should be focused on that field. 2. thing is an error message. I am using span for showing error message, but when page loaded span also making some space below the input field that is making a distorted. how to hide it when the page loaded and if we don't fill any field show error message show.
Here is my code:
HTML
<form name="registration" id="form" action="contact.php" method="post" onsubmit="return validateform();">
<div class="form-group">
<div class="input-group col-xs-12 text-left">
<label for="InputName">Full Name:<span style="color:red;">*</span></label>
<input type="text" name="name" id="name" class="form-control" placeholder="Name">
<br>
<span id="f_error_msg"></span>
</div>
<div class="input-group col-xs-12 text-left">
<label for="InputEmail">Email Address:<span style="color:red;">*</span></label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email">
<br>
<span id="e_error_msg"></span>
</div>
<div class="input-group col-xs-12 text-left">
<label for="InputCompany">Company:<span style="color:red;">*</span></label>
<input type="text" name="company" id="company" class="form-control" placeholder="Company">
<br>
<span id="c_error_msg"></span>
</div>
<div class="input-group col-xs-12 text-left">
<label for="ProjectDescription">Project Description:<span style="color:red;">*</span></label>
<input name="project" id="project" type="text" class="form-control" placeholder="Project Description">
<br>
<span id="p_error_msg"></span>
</div>
<div class="input-group col-xs-12 text-left">
<label for="InputMessage">Message:<span style="color:red;">*</span></label>
<input type="text" name="message" id="message" class="form-control" placeholder="I love a team that...">
<br>
<span id="m_error_msg"></span>
</div>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-success btn-block" value="Go">
</div>
</form>
JavaScript
function validateform() {
var fullname = document.registration.name.value;
var emailadd = document.registration.email.value;
var company = document.registration.company.value;
var project = document.registration.project.value;
var message = document.registration.message.value;
if (fullname === null || fullname === "") {
document.getElementById('f_error_msg').innerHTML = "Please enter Full Name";
fullname.focus();
return false;
document.getElementById('f_error_msg').style.display = "none";
}
var atposition = emailadd.indexOf("@");
var dotposition = emailadd.lastIndexOf(".");
if (atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= emailadd.length) {
document.getElementById('e_error_msg').innerHTML = "Please enter a valid e-mail address \n atpostion:" + atposition + "\n dotposition:" + dotposition;
emailadd.focus();
return false;
document.getElementById('e_error_msg').style.display = "none";
}
if (company === null || company === "") {
document.getElementById('c_error_msg').innerHTML = "Please enter your company name";
company.focus();
return false;
document.getElementById('c_error_msg').style.display = "none";
}
if (project === null || project === "") {
document.getElementById('p_error_msg').innerHTML = "Please enter your project name";
project.focus();
return false;
document.getElementById('p_error_msg').style.display = "none";
}
if (message === null || message === "") {
document.getElementById('m_error_msg').innerHTML = "Please enter your message here.";
message.focus();
return false;
document.getElementById('m_error_msg').style.display = "none";
}
}