Javascript Form Validation?

I can't get my validation script to work.

[KRMwebdesign]

Hi all. I'm having a major problem with my form validation script. I just can't get it to work. I can't see any problems with it. Can anyone here help?

Javascript:

<script language="text/javascript" charset="utf-8">
function validateForm(RegForm){
var userName = RegForm.myEmail.value;
var password = RegForm.myPass.value;

if (userName.length === 0) {
alert("You must enter a username (Valid Email).");
return false;
}

if (password.length === 0) {
alert("You must enter a password.");
return false;
}

return true;
</script>

xHTML Form:

<form ACTION="MyAction" METHOD="POST" name="RegForm" id="RegForm">
<fieldset>
<legend>Input your details to register </legend>
<p><label for="name">Email address:</label> <input name="myEmail" type="text" id="name" />
</p>
<p><label for="name">Choose password:</label> <input name="myPass" type="password" id="name" />
</p>
<p class="submit"><input name="submit" type="submit" id="submit" onClick="return validateForm();" value="Register now" />
</p><br />
</fieldset>
</form>

Thank you for any help you can provide.

[Fotiman]

1. The value of the language attribute is incorrect. But more importantly, the language attribute is invalid and shouldn't be used. Instead use the type attribute:

<script type="text/javascript">

2. charset is not a valid attribute. Don't include that.
3. Your validateForm function takes a form object as a parameter, but you are not passing it in in your call to validateForm.
4. You are calling validateForm on the onClick event handler of the submit button. That will not work if users use the keyboard to submit the form (pressing Enter when in one of the input fields). the correct place to put form validation handling is in the onsubmit event handler of the form, not in the onclick handler of the submit button:

<form ACTION="MyAction" METHOD="POST" name="RegForm" id="RegForm" onsubmit="return validateForm(this);">

5. Both your myEmail input and myPass input have an input of "name", which is invalid. id must be unique. Change those id values to match the name values, and then also fix the for attributes in each of the preceeding label elements to match.
6. You are missing a closing } for your validateForm function definition (after "return true;")
7. This is not a valid xHTML form. XHTML requires all lowercase attributes, so it should be "action=" instead of "ACTION=", etc.
8. It's generally good practice to put JavaScript code in a separate file and include it like this:

<script type="text/javascript" src="yourfile.js"></script>

Instead of including the script in your HTML file. It will keep your markup file smaller, and easier to maintain.
9. It's not a good idea to give buttons a name/id value of "submit", as this can cause problems if you try to submit the form via JavaScript: myform.submit(); that will have problems because it will see myform.submit as the input element, not as the native submit function. So instead, name it something like submitbtn.
10. You may also want to consider an unobtrusive JavaScript approach, which means don't use inline event handlers like onclick and onsubmit, but instead attaching event listeners from within your JavaScript code. Your markup would then look something like this:

<form action="MyAction" method="POST" name="RegForm" id="RegForm">
<fieldset>
  <legend>Input your details to register </legend>
  <p>
    <label for="myEmail">Email address:</label>
    <input name="myEmail" id="myEmail" type="text" />
  </p>
  <p>
    <label for="myPass">Choose password:</label>
    <input name="myPass" id="myPass" type="password" />
  </p>
  <p class="submit">
    <input name="submitbtn" id="submitbtn" type="submit" value="Register now" />
  </p>
  <br />
</fieldset>
</form>

And you would include script separately that would then get the "RegForm" and attach an onsubmit listener or handler.

Any questions?

[KRMwebdesign]

Wow. Never realised I was so bad at JavaScript lol. Thanks for the advice. I'll give that a go.

[KRMwebdesign]

That worked great until I changed the field names. Now it has stopped working again :(

I've gone through it using your message above as reference but haven't seen anything wrong with it. Although I am quite tired now as I've been working on this all day and it's now 22:30h where I am :(

Script in seperate page here: <script type="text/javascript" src="MyValidation.js"></script>

function validateForm(RegForm){
var firstName = RegForm.FirstName.value;
var userName = RegForm.dEmail.value;
var password = RegForm.dPassword.value;

if (firstName.length === 0) {
alert("Please enter a first name.");
return false;
}

if (userName.length === 0) {
alert("Please enter a username (Valid Email).");
return false;
}

if (password.length === 0) {
alert("Please enter a password.");
return false;
}

return true;
}

Form here:

<form ACTION="MyAction" METHOD="POST" name="RegForm" id="RegForm" onsubmit="return validateForm(this);">
<fieldset>
<legend>Input your details to register </legend>
<p><label for="name">First Name :</label> <input name="FirstName" type="text" id="FirstName" />
</p>
<p><label for="name">Last Name :</label> <input name="LastName" type="text" id="LastName" />
</p>
<p><label for="name">Email address:</label> <input name="dEmail" type="text" id="dEmail" />
</p>
<p><label for="name">Choose password:</label> <input name="dPassword" type="password" id="dPassword" />
</p>
<p class="submit"><input name="submitButton" type="submit" id="submitButton" value="Register now" />
</p><br />
</fieldset>
</form>

[Fotiman]

I just put together a quick test case using the code above and it works for me:

<html>
<head>
<title>Test</title>
</head>
<body>
<form action="MyAction" method="POST" name="RegForm" id="RegForm" onsubmit="return validateForm(this);"> 
  <fieldset> 
    <legend>Input your details to register </legend> 
    <p>
      <label for="name">First Name :</label> 
      <input name="FirstName" type="text" id="FirstName" /> 
    </p> 
    <p>
      <label for="name">Last Name :</label> 
      <input name="LastName" type="text" id="LastName" /> 
    </p> 
    <p>
      <label for="name">Email address:</label> 
      <input name="dEmail" type="text" id="dEmail" /> 
    </p> 
    <p>
      <label for="name">Choose password:</label> 
      <input name="dPassword" type="password" id="dPassword" /> 
    </p> 
    <p class="submit">
      <input name="submitButton" type="submit" id="submitButton" value="Register now" /> 
    </p>
    <br /> 
  </fieldset> 
</form>
<script type="text/javascript">
function validateForm(RegForm) { 
  var firstName = RegForm.FirstName.value;
  var userName = RegForm.dEmail.value;
  var password = RegForm.dPassword.value;
  if (firstName.length === 0) { 
    alert("Please enter a first name.");
    return false; 
  }
  if (userName.length === 0) { 
    alert("Please enter a username (Valid Email)."); 
    return false; 
  }
  if (password.length === 0) { 
    alert("Please enter a password."); 
    return false; 
  }
  return true; 
}
</script> 
</body>
</html>

(I'm only including the script in the HTML here to make this example more portable).

[KRMwebdesign]

Hi Fontiman. Thanks again for the help on this. I'm pulling my hair out here :)

I went through everything and it seems to be fine. I have the script on an .asp page. You don't think that would have any impact do you? Basically when I submit the form it seems to just bypass the script and go onto the next page. I've no idea why as I haven't changed much on it as you can see.

[KRMwebdesign]

I've got the form working now but I haven't inserted the asp insert yet which is part of the page. I also need a javascript that will check to make sure the email address is the right format. I could have a look online but I'd be afraid that it won't fit in with the code I have here. Is there anything I can use that will fit into my script here?

Here is the script I have at the mo but it's not working with the script I have:

function checkEmail(emailAddr)
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailAddr.value))
{
return (true)
}
alert("Invalid E-mail Address! Please re-enter.")
emailAddr.focus();
emailAddr.select();
return false;
}