removing a node.

[bmgz]

I have written a simple function that validates a form based on the form
objects' className attribute. The form basically write a "field
required" message next to the form element that is blank(and is
required). I have implemented all the Regex stuff onload already.

function checkRequired(varForm){
var varReturn = true;
for(var i=0; i<varForm.length; i++){
if(varForm.elements.className.indexOf('required') != -1 &&\
varForm.elements.value == ""){
varSpan=document.createElement('span');
varMsg=document.createTextNode('* This field is required!');
varSpan.appendChild(varMsg);
varSpan.setAttribute("class", "error");
varForm.elements.parentNode.appendChild(varSpan);
varReturn = false;
}
}
return varReturn;
}

I am having difficulty removing the new nodes I have created. Each time
I click submit, I want the nodes I created to be removed, otherwise I
just keep on appending the same message string each time. Any suggestions?

 

[Martin Honnen]

I have written a simple function that validates a form based on the form
objects' className attribute. The form basically write a "field
required" message next to the form element that is blank(and is
required). I have implemented all the Regex stuff onload already.

function checkRequired(varForm){
var varReturn = true;

I don't think it makes sense to prefix any variable name with var,
instead that makes reading the code harder.

for(var i=0; i<varForm.length; i++){
if(varForm.elements.className.indexOf('required') != -1 &&\
varForm.elements.value == ""){
varSpan=document.createElement('span');

You need to somewhere store those elements you create, either use an
array that is associated with the form e.g.
varForm.validationSpans = [];
and add those spans as needed e.g.
varForm.validationSpans[varForm.validationSpans.length] = varSpan;
or associate each span with the element e.g.
varForm.elements.validationSpan = varSpan;
The later on you can remove those spans, removing an element is as easy as
element.parentNode.removeChild(element);

varMsg=document.createTextNode('* This field is required!');
varSpan.appendChild(varMsg);
varSpan.setAttribute("class", "error");

Doing
varSpan.className = "error"
is the preferred way as it works with both IE and other browsers while
using setAttribute with IE would require setAttribute("className", "error")
to work.

 

[bmgz]

I don't think it makes sense to prefix any variable name with var,
instead that makes reading the code harder.

I am used to $variablename, trying to establish some new bad habits as I
am new to JS ;-)

You need to somewhere store those elements you create, either use an
array that is associated with the form e.g.
varForm.validationSpans = [];
and add those spans as needed e.g.
varForm.validationSpans[varForm.validationSpans.length] = varSpan;
or associate each span with the element e.g.
varForm.elements.validationSpan = varSpan;
The later on you can remove those spans, removing an element is as easy as
element.parentNode.removeChild(element);

dynamite, thanks.

varSpan.className = "error"

thanks for that, I think it was like that, then I changed it for no
particular reason..