Problem with adding child nodes

[Martin C++]

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>
</form>
</div>

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]);
		msg.appendChild(txt);

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

It should be something like the code below.

<form>
<p><input type="text" name="formName" id="formId" />ERROR: This field must be filled</p>
</form>

[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 />

validate(form){
	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;
}

Airshow

[Martin C++]

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;

[Airshow]

Martin,

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.

Airshow

[Airshow]

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.

Airshow