how can i get return value of function on validation of form

Question

i working on a website and i have to check some form such that any field should not be empty, if there is any empty field it should write this field is empty on the right side of field name

my form code is:-

        <form action="Owners Infoback.php"  onsubmit="return validateForm()"  method="post" name="enquiry" id="" class="form-body-02">
    <ul>
        <li>1. Name of owner <input name="Name_of_owner" type="text" class="textarea-bk-02" id=""  value="" style="border:none; width:330px; margin-left:40px; margin-top:15px; height:20px;"/>

        </li>
        <li>
         2. Name of company:<br />
         <p>(Enter name registered)</p></label>
        <input name="Name_of_company_registered" type="text" class="textarea-bk-02" id=""  value="" style="border:none; width:330px; margin-left:40px; margin-top:13px; height:20px;"/>
        </li>
        <li>
          3. Address:<p>(Write your own manufacturer address)</p>

        <input name="Owner_address" type="text" class="textarea-bk-02" id=""  value="" style="border:none; width:330px; height:20px; margin-left:40px; margin-top:13px;"/></li>

        </li>
        <li>
          4. Email id:
          <input name="Owner_Email_id" type="text" class="textarea-bk-02" id=""  value="<?php echo "{$row[3]}";?>" style="border:none; width:330px; margin-left:40px; margin-top:13px; height:20px;"/>
        </li>
        <li><input name="Save" type="submit"  class="send-btns-02 right" value="save" style="margin-top:5px;" >
        <div class="clear"></div>
        </li>
    </ul>

and my java script function is:-

   function validateForm(string msz)
  {
 var x=document.forms["enquiry"]["Name_of_owner"].value;
if (x==null || x=="")
{
msz="First name must be filled out");
return msz;
}
x=document.forms["enquiry"]["Name_of_company_registered"].value;
if (x==null || x=="")
{ 
alert("Name of company registered filled out");
return false;
}
x=document.forms["enquiry"]["Owner_address"].value;
if (x==null || x=="")
{
alert("Owner addressmust be filled out");
return false;
}
 x=document.forms["enquiry"]["Owner_Email_id"].value;
 var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
 alert("Not a valid e-mail address");
 return false;
}
}

and i want instead of alert function it should return a star(*) and message please fill this form just right of field name, please help me..thanks in advance..

Answer 1

You could put hidden Divs next to each form input:

<div id="nameOfOwnerError" style="display:none">*</div>

And do this for each input, then you can choose to show/hide them depending whether they are valid or not:

$("#nameOfOwnerError").show();

Edit: Neeraj - try this.

In Javascript (sorry), something along the lines of.....

 var nameOfOwnerError = document.getElementById("nameOfOwnerError");
nameOfOwnerError.style.display="visible";

Off the top of my head, but you get the idea. Main point was simply to hide the asterisks and show hide them using the code you have.

Edit2: Sorry Neeraj, was untested - this works for me:

document.getElementById('nameOfOwnerError').style.display = "";

makes the element reappear and you could do

...display="none"; 

in the js code to hide again

Edit3: You could add an OnKeyUp event to the textboxes, so that when a text is entered into the textbox, you could trigger you validation script:

<input name="Name_of_owner" type="text" onkeyup="validateForm('');" class="textarea-bk-02" id=""  value="" style="border:none; width:330px; margin-left:40px; margin-top:15px; height:20px;"/>

Using the ifs to determine if the field is empty (as you are doing), you should be able to show/hide the asterisks as soon as a user has typed into a given textbox.

Got to go for now but something along these lines is what you're looking for, good luck!

Answer 2

you don't want it to return a *. You want it to return false (just as it's doing). What you also want is to draw a * next to the field along with a message as to what you want them to do.

For this to happen you will either want to add an invisible div next to the form field and show it (whichever one it is, based on the missing data) when the user tries to submit an invalid form. Or you can add the element at run time using document.createElement and attach it to the parent of the form field. In either case you'll have to make sure your HTML accommodates the extra element.