Help with form submission (involves javascript)

[JOKER_JOKER]

I am working on a registration form for my website and I got it to output the errors in their registration form as they are typing using javascript and ajax (such as a username already being used or password too short), but I'm not sure how to make it so they can't submit the form unless they correct these errors.
HTML code:

<form name=registrationForm action="insert.php" method="post" onsubmit="return isFormValid(this)">
<br />
Desired Username:
<input type="text" name="usernameField" onkeyup="showUser(this.value)" />
<div id="userTaken"></div>
<br />
Desired Password:
<input type="password" name="passField1" onkeyup="passLength(this.value)" />
<div id="passLength"></div>
<br />
Retype Password:
<input type="password" name="passField2" onkeyup="areEqual(this.value, passField1.value)" />
<div id="passEqual"></div>
<br />
Email Address:
<input type="text" name="emailField" onkeyup="isEmailValid(this.value)" />
<div id="emailValid"></div>
<br />
<input type="submit" value="Register" />
</form>
<div id="formValid"></div>

Each of the javascript functions take the arguments from the form and see if they meet specifications, however, I'm not sure how to make it so they can't submit the form unless they handle the errors. I tried using a function that calls the other smaller functions when the user submits the form but that doesn't seem to work. I can show the javascript code if you need. Any ideas?

 

[johnglenn]

I always thought if the onSubmit event returned false, the form wouldn't submit. Maybe try stopping event propagation?

In Mootools, I would do...

$('registrationForm').addEvent('submit', function(e) {
  if(e) {
    e = new Event(e);
    e.stop();
  }

  // stuff to do
});

 

[JOKER_JOKER]

Yes, if the event returns false, it won't submit, but I have no way to track whether or not an error has been outputted. In any other program, I would just use a boolean value for this, but seeing as how I'm just calling specific functions and not running a whole program, I don't know how to check for this. I'm pretty new to javascript, so I'm still figuring out a lot of things, not really sure about adding events. Also, I've never worked with Mootools. See I have separate functions which are called individually, but I can't call them at the same time when the submit button is hit. Any other ideas?

 

[johnglenn]

Ah, I get it.... You can call the functions and pass in the values in the input fields....

You can run the functions by doing things like...

isEmailValid(document.registrationForm.emailField.value);

... inside your isFormValid function.

 

[JOKER_JOKER]

I tried that, but it doesn't seem to work. In fact, it causes none of my other functions to work when I implement it. My javascript code is below.

// -------------------------------------------------
//		Checks if the form is valid

function isFormValid(regForm)
{
	if ((passLength(regForm.passField1.value) &&
		areEqual(regForm.passField2.value, regForm.passField2.value) &&
		isEmailValid(regForm.emailField.value) &&
		showUser(regForm.usernameField.value) &&
		)==true)
		return true;
	else
	{
		alert("Please fix the errors in your registration.");
		return false;
	}
}

// -------------------------------------------------
//		Checks if the username is taken
function passLength(str)
{
	if ( str.length > 0 && str.length < 6 )
	{
		document.getElementById("passLength").innerHTML="Password must be at least 6 characters long.";
		return false;
	}
	else
	{
		document.getElementById("passLength").innerHTML="";
		return true;
	}
}	


// -------------------------------------------------
//		Checks if the passwords are equal
function areEqual(str1, str2)
{
	if ( (str1 != str2) && (str1.length > 5) )
	{
		document.getElementById("passEqual").innerHTML="Passwords do not match.";
		return false;
	}
	else
	{
		document.getElementById("passEqual").innerHTML="";
		return true;
	}
}

// -------------------------------------------------
//		Checks if the email looks valid
function isEmailValid(str)
{
	atPos=str.indexOf("@");
	dotPos=str.lastIndexOf(".");
	
	if ( ((atPos < 1) || (dotPos - atPos < 2))&& (str.length > 0) )
	{
		document.getElementById("emailValid").innerHTML="Email does not appear to be valid";
		return true;
	}
	else
	{
		document.getElementById("emailValid").innerHTML="";	
		return true;
	}
}


// -------------------------------------------------
//		Checks if the username is taken

var xmlhttp;

function showUser(str)
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
	  {
		  alert ("Browser does not support HTTP Request");
		  return;
	  }
	var url="isUserTaken.php";
	url=url+"?q="+str;
	url=url+"&sid="+Math.random();
	xmlhttp.onreadystatechange=stateChanged;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}

function stateChanged()
{
	if (xmlhttp.readyState==4)
	{
		document.getElementById("userTaken").innerHTML=xmlhttp.responseText;
		if (xmlhttp.responseText != null)
			return false;
		else
			return true;
	}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

 

[Arainach]

Why bother disabling the submit button? You're still going to have to have server-side validation of the input fields (after all, javascript can be turned off and HTTP can be spoofed), so if they click Submit when stuff still isn't valid, they'll just get the error message when you redirect them back to the page.

 

[Tawnos]

Why bother disabling the submit button? You're still going to have to have server-side validation of the input fields (after all, javascript can be turned off and HTTP can be spoofed), so if they click Submit when stuff still isn't valid, they'll just get the error message when you redirect them back to the page.

This ^

Also, I'm glad your client side email checker is sane, and doesn't block + in the username. That bugs the hell out of me, since I use it for filtering. Make sure your server side verification is also that way

 

[JOKER_JOKER]

So, would it be best if I just had a server-side validation? I've tried implementing one, and just sending the errors back through $_SESSION variables. Is this necessarily the best way to do it? Also, how would I make it so it not only sends back the errors, but also repopulates the form when they go back (it erases everything the user typed when I do the redirect)?

 

[Arainach]

You can do both to try and help people without having to submit the page, but only server-side validation is MANDATORY.

For how to repopulate form data, look into the value= property of HTML controls.

 

[Tawnos]

There are a couple ways you could do it. If javascript is on, you can use ajax postbacks to send data to server for validation one field at a time, then turn on an error message display if it's bad data. If javascript is off, you'd have to do as Arainach said and use the value property.