Hello, I want to validate this form and display error right next to the input field.

<div id="regForm"> 
<form action="register.php" method="POST" onsubmit="return validate(this);"id=registration" name="registration"><p>
	Username: <input type="text" name="username" id="username_reg" /><br />
	Password: <input type="password" name="password" id="password_reg" /><br />
	Repeat password: <input type="password" name="repeatPassword" id="repeat_reg" /><br />
	Email: <input type="text" name="email" id="email_reg" /><br />
	<input type="submit" name="submit" value="Register" /></p>
if(elemValue[i] == "" || elemValue[i] == null){
		error[error.length] = "This field must be filled";
		var msg = document.createElement('p');
		var txt = document.createTextNode(error[error.length - 1]);

How can I add this text to appear right after the input field ??

It should be something like the code below.

<p><input type="text" name="formName" id="formId" />ERROR: This field must be filled</p>
5 Years
Discussion Span
Last Post by Airshow

Use spans, each with a unique id, for error messages:

Username: <input type="text" name="username" id="username_reg" />&nbsp;<span id="username_msg"></span><br />
	rtnVal = true;//Assume true (OK) initially, then if one or more validation test yields false, false will be returned and the form will not be submitted.

	var username_msg = document.getElementyById('username_msg');
	username_msg.innerHTML = (!form.username_reg.value) ? 'ERROR: This field must be filled' : '';
	rtnVal = rtnVal && !!form.username_reg.value;

	var xxxx_msg = document.getElementyById('xxxx_msg');
	xxxx_msg.innerHTML = (!form.xxxx_reg.value) ? 'ERROR: This field must be filled' : '';
	rtnVal = rtnVal && !!form.xxxx_reg.value;

	//and so on for all fields

	return rtnVal;


Edited by Airshow: n/a

Votes + Comments
Very good post, thanks

Thanks a ton, that is exactly what I was looking for. Just one question. Can you please explain the following line, I believe I m not familiar with that kind of use of operators. Is it also ternary ? Sorry for noob question.

rtnVal = rtnVal && !!form.username_reg.value;


In parts : !!form.username_reg.value is a shorthnd way of converting string to boolean. If the value is falsy (null|undefined|empty-string) then this fragment returns false. If the value is a non-empty-string then the fragment returns true. rtnVal = rtnVal && ... ANDs the current value of rtnVal with the booleanised .value.

  • true && non-empty-string gives true
  • true && empty-string gives false
  • false && either non-empty-string or empty-string gives false.

By applying this logic successively to each form field, any one validation failure will set rtnVal irrevocably (in the current invocation of validate()) to false.

This is precisely what you want for any one validation failure to suppress form submission. Put another way, all form fields must validate for rtnVal to remain true and thus allow the form to submit.



The individual validation tests do not need to be the same in each case.

When you get to the second password, you need to check that it is the same as the first password rather than check it is not empty-string. And provide an appropriate error message.


Edited by Airshow: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.