I'm currently working on a website for a company that requires users to complete all the information before proceeding.
To achieve this, I created a form with the following code:
<form action="Owners Infoback.php" onsubmit="return validateForm()" method="post" name="enquiry" id="" class="form-body-02">
<ul>
<li style="overflow:hidden;">
<label for="Name" class="l1">1. Name of owner:<br />
<p>(If more than one separate using comma.</br> Eg. A,B,C )<br /></p></label>
<div id="nameOfOwnerError" style="visibility:hidden;color:red; display:inline; margin-left:20px;">*</div>
<input name="Name_of_owner" type="text" class="textarea-bk-02" id="" value="<?php echo "{$row[0]}";?>" style="border:none; width:330px; margin-left:14px; margin-top:15px; height:20px;"/>
</li>
<li>
<label for="Name" class="l1">2. Name of company:<br /><p>(Enter name registered)</p></label>
<div id="nameOfOwnerCompany" style="visibility:hidden;color:red; display:inline; margin-left:20px;">*</div>
<input name="Name_of_company_registered" type="text" class="textarea-bk-02" id="" value="<?php echo "{$row[1]}";?>" style="border:none; width:330px; margin-left:10px; margin-top:13px; height:20px;"/>
</li>
<li>
<label for="Name" class="l1">3. Address:<p>(Write your own manufacturer address)</p></label>
<div id="nameOfOwnerAddress"style="visibility:hidden;color:red; display:inline; margin-left:20px;">*</div>
<input name="Owner_address" type="text" class="textarea-bk-02" id="" value="<?php echo "{$row[2]}";?>" style="border:none; width:330px; height:20px; margin-left:13px; margin-top:13px;"/>
</li>
...
</form>
and in the header section, I implemented the following JavaScript code:
<script>
function validateForm()
{
var y=true;
var x=document.forms["enquiry"]["Name_of_owner"].value;
if (x==null || x=="")
{
document.getElementById("nameOfOwnerError").style.visibility="visible";
document.getElementById("nameOfOwnerError1").style.visibility="visible";
y= false;
}
else
{ document.getElementById("nameOfOwnerError").style.visibility="hidden";
document.getElementById("nameOfOwnerError1").style.visibility="hidden";
}
...
}
</script>
When running the script, I encountered an issue where empty fields were leaving gaps in the red text. It is not displaying a continuous error message for each field. How can I fix this and ensure consistent error messaging?
As a new user, I apologize for the lack of images showing the issue. In the screenshot provided, you can see that only certain fields are being highlighted in red when left empty, causing gaps in the error messages. How do I eliminate these blanks spaces between the error messages?