Link to home
Start Free TrialLog in
Avatar of kadin
kadinFlag for United States of America

asked on

Simple form validation almost working.

A form with one input field. A submit query button. And a blank readout area at the top named container-g.

When the form is submitted, the JavaScript validates the subject input field. If empty, it replaces container-g with container-r filled with the err message.

This works fine, however when I add the next three lines of code which creates a red star and displays it next to the input field the programs behaves oddly. I click the submit button and for less than a second container-g is replaced with container-r and then back again to container-g. So the err message just flashes and the star never appears at all.

Can someone help me trouble shoot this? Thanks.

User generated image
<?php
if (isset($_POST['submit_x'])) {echo 'form submitted';}
?>

<script>
function validateSubject(field) {
	if (field == '') {
		return 'What's your subject?';
	}
	return '';
}

function validate(form) {
	var err = '';
	err = validateSubject(form.subject.value)

	if (err == '') return true
		else {
			document.getElementById('container-g').style.display = 'none';
			document.getElementById('form-outer').innerHTML +=
				'<div id="container-r">' + err + '</div>';

			var txt = document.creatTextNode('*');
			var subjectErr = document.getElementById('subject-star');
			subjectErr.appendChild(txt);
			return false
		}
		return false
}
</script>

<form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data" onsubmit="return validate(this);">
	<div id="form-outer">
			
		<div id='container-g'></div>
			
		<div id='subject-star'></div>
		<input name="subject" type="text" size="35" />
			
		<div id="submit-button">
			<input name="submit" width="70" height="21"/>
		</div>
		</div>
	</form>

Open in new window

Avatar of sivagnanam chandrakanth
sivagnanam chandrakanth
Flag of India image

There are two errors in your script

1) String escape issue in return 'What's your subject?';
2) Createtextnode cannot be used to append to existing element. If want then you need to create element also in your JS code

Below is the working code for you

<script>
function validateSubject(field) {
      if (field == '') {
            return 'What\'s your subject?';
      }
      return '';
}

function validate(form) {
      var err = '';
      
      err = validateSubject(form.subject.value)
      alert(err);
      if (err == ''){
      return true
      }else {
                  document.getElementById('container-g').style.display = 'none';
                  document.getElementById('form-outer').innerHTML +='<div id="container-r">' + err + '</div>';
//using createtextnode                  
                  var h=document.createElement("div")
                  var t=document.createTextNode("*");
                  h.appendChild(t);
                  document.body.appendChild(h);
//using innerhtml                  
document.getElementById('subject-star').innerHTML ="*";
                  
                  return false;
      }
      return false;
}
</script>

I have given two options also inside the code remove whichever is suites your scenario
Avatar of kadin

ASKER

Thanks for your response. I made those changes.

This gives the same flash behavior, it does not work.
document.getElementById('subject-star').innerHTML ="*";

This however displays the err message permanently instead of flashing, but I see no star appear. How do I position and display that star? Thanks.
var h=document.createElement("div")
var t=document.createTextNode("*");
h.appendChild(t);
document.body.appendChild(h);
In your else condition, empty the element value

document.getElementById('subject-star').innerHTML ="";

 if (err == ''){
      return true
//document.getElementById('subject-star').innerHTML ="";
  }else {

}

I dont see a way to position the using which is using document.createTextNode
Avatar of kadin

ASKER

When I place subject-star code above, JavaScript returns true and goes right to php.

if (err == '') return true
		else {
                        document.getElementById('subject-star').innerHTML ="";
			document.getElementById('container-g').style.display = 'none';
			document.getElementById('form-outer').innerHTML +=
				'<div id="container-r">' + err + '</div>';

			var h=document.createElement("div")
                        var t=document.createTextNode("*");
                        h.appendChild(t);
                        document.getElementById('p-subject-star').appendChild(h);
			return false
		}
		return false

Open in new window

When I place subject-star below, I get the same old flash behavior.
if (err == '') return true
		else {
			document.getElementById('container-g').style.display = 'none';
			document.getElementById('form-outer').innerHTML +=
				'<div id="container-r">' + err + '</div>';

                        document.getElementById('subject-star').innerHTML ="";
			var h=document.createElement("div")
                        var t=document.createTextNode("*");
                        h.appendChild(t);
                        document.getElementById('p-subject-star').appendChild(h);
			return false
		}
		return false

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of sivagnanam chandrakanth
sivagnanam chandrakanth
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of kadin

ASKER

I made all those changes, but I still get the err flash and back to original form. The only difference in my code which I did not show is the submit button is actually an image. I don't know if that has an effect on the javascript:

<input type="image" name="submit" src="submit_button.jpg" width="70" height="21"/>
Avatar of kadin

ASKER

I changed to a submit button and still get the flash.
Avatar of kadin

ASKER

I got it to work using your code. I will need some time to study it to determine why.

Thanks for your help.
even the image work for me..

 <input type="image" name="submit" src="submit_button.jpg" width="70" height="21"/>

Try clearing the browser cache and use firebug to determine