title: Displaying error message next to input box using JavaScript
body: <p>I have a really simple question, I am currently just editing my code below so that the error message for First Name appears next to the input box. This currently works however the error message appears underneath the input box and not next to it. Any advice on how to get the error message to appear next to the box would be greatly appreciated. </p>
  
  <p>JavaScript file:</p>
  
  <pre><code>function checkFName() {
  
  var Fname = document.forms["MyForm"]["Fname"].value;
  if (Fname == null || Fname == "") {
      return true; 
  }
  }
  
  
  
  function checkSName() {
  var Sname = document.forms["MyForm"]["Sname"].value;
  if (Sname == null || Sname == "") {
      return true;
  }
  }
  
  function checkFLA() {
  var FLA = document.forms["MyForm"]["Fline"].value;
  if (FLA == null || FLA == "") {
      return true;
  }
  }
  
  function checkSLA() {
  var SLA = document.forms["MyForm"]["Sline"].value;
  if (SLA == null || SLA == "") {
      return true;
  }
  }
  
  function checkTown() {
  var Town = document.forms["MyForm"]["Town"].value;
  if (Town == null || Town == "") {
      return true;
  }
  }
  
  function checkPcode() {
  var Pcode = document.forms["MyForm"]["Pcode"].value;
  if (Pcode == null || Pcode == "") {
      return true;
  }
  }
  
  function checkEmail() {
  var Email = document.forms["MyForm"]["Email"].value;
   atpos = Email.indexOf("@");
   dotpos = Email.lastIndexOf(".");
   if (atpos &lt; 1 || ( dotpos - atpos &lt; 2 ))   {
   return true;
   }    
   }
  
  
  
  function f1() {
  var bool = true;
  if (checkFName(Fname)) {
  var output = "First name must be entered";
  document.getElementById("f4").innerHTML = output;
      bool = false;
  }
  
  
  if (checkSName(Sname)) {
      alert("Surname must be filled out");
      document.MyForm.Sname.focus();
      document.getElementById("Sname").style.border = '2px solid red';
  bool = false;
  }
  
      if (checkFLA(Fline)) {
      alert("First line of address must be filled out");
      document.MyForm.Fline.focus();
      document.getElementById("Fline").style.border = '2px solid red';
  bool = false;
  }
  
          if (checkSLA(Sline)) {
      alert("Second line of address must be filled out");
      document.MyForm.Sline.focus();
      document.getElementById("Sline").style.border = '2px solid red';
  bool = false;
  }
  
  
  if (checkTown(Town)) {
      alert("Town must be filled out");
      document.MyForm.Town.focus();
      document.getElementById("Town").style.border = '2px solid red';
      bool = false;
  }
  
  if (checkPcode(Pcode)) {
      alert("Postcode must be filled out");
      document.MyForm.Pcode.focus();
      document.getElementById("Pcode").style.border = '2px solid red';
  bool = false;
  }
  
      if (checkEmail(Email)) {
      alert("This is not a valid email");
      document.MyForm.Email.focus();
      document.getElementById("Email").style.border = '2px solid red';
  bool = false;
  }
  return bool;
  }
  </code></pre>
  
  <p>Perl File:</p>
  
  <pre><code>   #!/xampp/perl/bin/perl  -w
  
  require "dbfunc.pl";
  use CGI qw/:standard/;
  use CGI::Carp qw(fatalsToBrowser);
  
  print header;
  print start_html("Customer Registration");
  
  print_html_head_section();
  
  print "&lt;h1&gt;Your Details&lt;/h1&gt;\n";
  print "Please Fill In Your Details Below&lt;p&gt;"; 
  
  print qq!&lt;form method="GET" name="MyForm" onsubmit="return f1()"    action="RegisterCustomerInsert.pl"&gt;&lt;br /&gt;!;
  
  print qq! Title: &lt;select name="Title"&gt;  
  
  &lt;option value="Mr"&gt;Mr&lt;/option&gt;
  &lt;option value="Mrs"&gt;Mrs&lt;/option&gt;
  &lt;option value="Miss"&gt;Miss&lt;/option&gt;
  &lt;option value="Dr"&gt;Dr&lt;/option&gt;
  &lt;/select&gt;&lt;br&gt;!;
  
  
  
  print qq! Firstname: &lt;input type="text", name="Fname" , id="Fname" size=15&gt;    &lt;p id="f4"&gt;&lt;/p&gt;! ;
  print qq! Surname: &amp;nbsp &lt;input type="text", name="Sname" , id="Sname" size=15&gt;&lt;br&gt;! ;
  print qq! First Line Of Address: &lt;input type="text", name="Fline" , id="Fline" size=30&gt; &lt;br&gt;! ;
  print qq! Second Line Of Address: &lt;input type="text", name="Sline" , id="Sline" size=30&gt; &lt;br&gt;! ;
  print qq! City / Town: &lt;input type="text", name="Town" , id="Town" size=30&gt; &lt;br&gt;! ;
  print qq! Postcode: &lt;input type="text", name="Pcode" , id="Pcode" size=30&gt; &lt;br&gt;! ;
  print qq! E-Mail: &lt;input type="text", name="Email" , id="Email" size=15&gt;&lt;br&gt;! ;
  
   sub print_html_head_section {
   print "&lt;head&gt;\n";
   print "&lt;script src='RegisterCustomerValidation.js'    type='text/javascript'&gt;&lt;/script&gt;\n";
   print "&lt;/head&gt;\n";
   }
  
  print qq!&lt;br /&gt;&lt;input type="submit" value="Add"  style="width:50px"/&gt;\n&lt;/form&gt;&lt;br /&gt;!;
  
  print end_html;
  </code></pre>