We help IT Professionals succeed at work.

JavaScript - onclick button to print out error messages

no158
no158 asked
on
1,223 Views
Last Modified: 2008-08-13
I've been fooling around with this function and I'm trying to get it to work. Maybe one of you guys can put me back on track. So right below here is the function. I've been trying lots of things to get this to work so it might look a little messy.

function validation(form1)
{
        if (form1.first_name.value == '')
        {
            document.form1.getElementsByName("first_name_error").value = "*Missing first name";
            return false;
        }
        if (form1.last_name.value == '')
        {
             document.form1.getElementsByName("last_name_error").value = "*Missing last name";
             return false;
        }
        if (form1.company.value == '')
        {
             document.form1.getElementsByName("company_error").value = "*Missing company name";
             return false;
        }
        if (form1.email.value != '')
        {
             document.form1.getElementsByName("email_error").value = "*Missing email address";
             return false;
        }
          
          if (form.first_name.value != '' && form.last_name.value != ''
          && form.company.value != '' && form.email.value != '')
          {
                return true;
          }
          return false;
}
</script>

This is what I'm using to call it.
---------------------------------------
<html>
<form action="servlet URL" method="post" onsubmit="return validation(this)" />
<body>
<form id="form1" runat="server">
<asp:Button runat="server" text="Register" id="submit" />
<asp:Label id="first_name_error" runat="server" />         // Here is just one of the lables
<body>
</form>


I'm basically trying to make a validation check on input from the user to register for something. I'm trying to avoid using popups. So I have a button that will run a form action that calls a function that will do the validation. Problem is I can't get the code for the validation correct. Any thoughts?
Comment
Watch Question

Commented:
In your form, you need to add name="form1".

For each of your inputs, are you using id="first_name" or name="first_name"?  If you are using IDs, you need to use "document.getElementById('first_name').value"

Commented:
Same thing with the error message, use this:
document.getElementById("first_name_error").value = "*Missing first name";

Open in new window

Author

Commented:
I'm using ID. I made the changes but still the validation is not working.

Author

Commented:
I keep looking back at

function validation(form)
and
onsubmit="return validation(this)

I copied the code from a random site and I don't really know what is ment by the 'this' and 'form' as parameters. I'm wondering if that might be apart of the problem aswell?

Commented:
Can you post the entire thing?

Because the HTML portion you posted in your original post is completely wrong.  Your form is outside your body tag and there is no place for the script.

Author

Commented:
Some of the data is sensitive, but I have two forms. One outside the body and one inside the body. The one outside the body is a form for salesforce that will post the data and call the validation function. The one inside the body just holds all the buttons and lables ordered in a table. The id for the one inside the body is form1 and the one outside does not have an id or a name.

Hope that clears some stuff up.

Author

Commented:
Did a little triming.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="_Default" %>
 
<script language="JavaScript" type="text/javascript">
function validation(form)
{
        if (form.first_name.value == '')
        {
            document.getElementsByID("first_name_error").value = "*Missing first name";
            return false;
        }
        if (form.last_name.value == '')
        {
             document.getElementsByID("last_name_error").value = "*Missing last name";
             return false;
        }
        if (form.company.value == '')
        {
             document.getElementsByID("company_error").value = "*Missing company name";
             return false;
        }
        if (form.email.value != '')
        {
             document.getElementsByID("email_error").value = "*Missing email address";
             return false;
        }
	    
	    if (form.first_name.value != '' && form.last_name.value != ''
	    && form.company.value != '' && form.email.value != '')
	    {
	    	return true;
	    }
	    return false;
}
</script>
 
<head runat="server">
    <title>
    Reg
    </title>
</head>
 
<!-- salesforce -->
<form action="servletURL" method="post" onsubmit="return validation(this)" />
 
 
<body style="margin-top: 2px" vlink="666666" bgcolor="#FFFFFF"> 
    <form id="form1" runat="server">
     <table cellpadding="1" width="800px" border="0">
     <tr>
     <td align="center">
     <strong>
     Registration
     </strong>
     <br/>
     </td>
     </tr>
     <tr>
     <td align="center">
     <font size="-1">
     Please complete the form below. * Indicates a required field.
     </font>
     <br/>
     <br/>
     </td>
     </tr>
     </table>
    <table cellpadding="1" width="800px" border="0">
    <tr> 
    <td width="207" rowspan="7">
    <img alt="" src="avatarIcon.jpg" width="200" height="176" />    </td> 
    <td width="109" valign="top">    </td>
   <td width="172">   </td> 
    </tr>
    <tr>
    <td>
    <strong>
    <asp:Label id="First_Name_label" runat="server"  Text="*First Name" style="text-align: left" />
    </strong>
    </td>
    <td style="text-align: left">
    <asp:TextBox  id="first_name" runat="server" maxlength="40" style="text-align: left" />
    </td> 
    <td width="138" style="text-align: left">
    <font color="red" size="-1">
    <asp:Label id="first_name_error" runat="server" />
    </font>
    </td>
    </tr>
    <tr>
    <td>
    <strong>
    <asp:Label id="Last_Name_label" runat="server"  Text="*Last Name" style="text-align: left" />
    </strong>
    </td>
    <td style="text-align: left">
    <asp:TextBox  id="last_name" runat="server" maxlength="80" />
    </td> 
    <td style="text-align: left">
    <font color="red" size="-1">
    <asp:Label id="last_name_error" runat="server" />
    </font>
    </td>
    </tr>
    <tr>
    <td>
    <strong>
    <asp:Label id="Company_label" runat="server"  Text="*Company" style="text-align: left" />
    </strong> 
    </td>
    <td style="text-align: left">
    <asp:TextBox id="company" runat="server" maxlength="40" />
    </td>
    <td style="text-align: left">
    <font color="red" size="-1">
    <asp:Label id="company_error" runat="server" />
    </font>
    </td>
    </tr> 
    <tr>
    <td>
    <strong>
    <asp:Label id="Email_label" runat="server"  Text="*Email" style="text-align: left" />
    </strong> 
    </td>
    <td style="text-align: left">
    <asp:TextBox  id="email" runat="server" maxlength="50" />
    </td>
    <td style="text-align: left">
    <font color="red" size="-1">
    <asp:Label id="email_error" runat="server" />
    </font>
    </td>
    </tr>
    <tr>
    <td>
    <asp:Button runat="server" text="Register" id="submit" />
    </td>
    </tr>
    </table> 
    </form>
</body> 
</html>

Open in new window

Author

Commented:
there is a <html> right above <head runat="server">, if you were wondering.

Commented:
Make sure it's getElementById, not getElementsByID.  Your script syntax needs to be like this:
function validation(form)
{
  if (document.getElementById('first_name').value == '')
  {
     document.getElementByID("first_name_error").value = "*Missing first name";
     return false;
  }
 
  ..
  ..
  ..
}

Open in new window

Author

Commented:
I changed them all to that standard and still no luck

Author

Commented:
how does the function know which form to look at?

Commented:
It shouldn't need to know because it searches the entire document.  Can you post the changes you made to the script?
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Maybe the script is running correctly but when I use it in conjunction with:

<form action="my servlet URL" method="post" onsubmit="return validation(this)" />
<input type="hidden" name="oid" value="code" />
<input type="hidden" name="retURL" value="password.aspx" />
<input type="hidden" name="Campaign_ID" value="code" />

The problem seems to be with this code. It runs the servlet url before running the script. So no validation is happening. So I end up at the password.aspx page after it posts the data and no validation occured. I have to have the code exactly the way it is above. I did make a smaller version of that script with just a simple true and false and it worked. Once I added in the error messages, thats when things started to get funky.

Author

Commented:
Once I start adding the if statements in the script then it keeps returning true. Are there any other means of debugging this other then just trial and error?
Whilst I don't have time to read your code and figure out why it isn't working, I do have a suggestion to improve this slightly. Rather than returning false if one condition is false, set a variable to false and return the variable after all checks. This way all error messages will be shown at once rather than one at a time. Just be sure to set your variable to true before running any evaluations.

Also, telling us exactly what is happening will help you get an answer much faster. If absolutely nothing is happening, try putting random alert() statements into your validation routine to see how far into the routine it is getting, if it's even running at all.

var valid = true;
 
if (form1.company.value == '')
{
     document.form1.getElementsByName("company_error").value = "*Missing company name";
     valid = false;
}
if (form1.email.value != '')
{
     document.form1.getElementsByName("email_error").value = "*Missing email address";
     valid = false;
}
return valid;

Open in new window

Author

Commented:
I was putting the script tag in the wrong area, thus it did not load properly.

Thanks for the help.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.