Javascript Form Validation

Why does validation clear my form?

Page 1 of 1

2 Replies - 1396 Views - Last Post: 04 March 2009 - 03:03 PM

#1 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 191
  • Joined: 03-December 08

Javascript Form Validation

Post icon  Posted 04 March 2009 - 01:43 PM

Hello and thanks for your time. I have a simple html form, and a javascript function to simply check to see if the form fields are not empty. If they are an alert let's the user know that they must provide the necessary info. Pretty basic, I know.

THere are only 4 form fields, but if the user supplies info for 3 out of the 4 fields, they will get an alerts asking them to provide the missing information. When they click ok on the alert, the entire form clears! Is there a way to keep the information already provided? Thanks for any insight you may be able to provide.

the form:
<form id="form" name="form" method="post" action="" onsubmit="finalCheck()">
Please provide the following information:<p>
<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name">

<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="email" id="email">

<label>Date
<span class="small">i.e. 03/10/2009</span>
</label>
<input type="text" name="date" id="date">

<label>Reason for Closing Account
<span class="small"></span>
</label>

<TEXTAREA NAME="reason" rows="3" id="reason"></TEXTAREA>

<div class="spacer"></div>

<div class="buttons">
<button TYPE=submit NAME="submitbutton" VALUE="Submit">Submit</button>
<button TYPE=reset NAME="resetbutton" VALUE="Reset">Clear</button>
</div>
<div class="spacer"></div>

</form>



the javascript function:
<script type="text/javascript">
function finalCheck(){
	if(document.getElementById('div2').style.display == "block"){
		if(document.getElementById('name').value == ""){
			alert("Your name is required.");
			return false;
		}
		if(document.getElementById('email').value == ""){
			alert("A valid email address is required.");
			return false;
		}
		if(document.getElementById('date').value == ""){
			alert("Today's date is required.");
			return false;
		}
		if(document.getElementById('reason').value == ""){
			alert("Reason for closing account is required.");
			return false;
		}
	}
}
</script>



Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Javascript Form Validation

#2 kiwi2  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 178
  • Joined: 16-September 08

Re: Javascript Form Validation

Posted 04 March 2009 - 02:45 PM

<script type="text/javascript">
function finalCheck(){
if(document.getElementById('name').value == ""){
alert("Your name is required.");
return false;
} if(document.getElementById('email').value == ""){
alert("A valid email address is required.");
return false;
} if(document.getElementById('date').value == ""){
alert("Today's date is required.");
return false;
} if(document.getElementById('reason').value == ""){
alert("Reason for closing account is required.");
return false;
} } </script>
<form id="form" name="form" method="post" action="" onsubmit="finalCheck()">
Please provide the following information:<p>
<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" id="name" id="name">
<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" id="email" id="email">
<label>Date
<span class="small">i.e. 03/10/2009</span>
</label>
<input type="text" name="date" id="date">
<label>Reason for Closing Account
<span class="small"></span>
</label>
<TEXTAREA NAME="reason" rows="3" id="reason"></TEXTAREA>
<div class="spacer"></div>
<div class="buttons">
<button TYPE=submit NAME="submitbutton" VALUE="Submit">Submit</button>
<button TYPE=reset NAME="resetbutton" VALUE="Reset">Clear</button>
</div>
<div class="spacer"></div>
</form>




 

no style set up, therefore you cannot call it in your code, better to use id, than class here
Was This Post Helpful? 0
  • +
  • -

#3 kiwi2  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 178
  • Joined: 16-September 08

Re: Javascript Form Validation

Posted 04 March 2009 - 03:03 PM

<script type="text/javascript">
function finalCheck(){
if(document.getElementById('name').value == ""){
alert("Your name is required.");
return true;
}

if(document.getElementById('email').value == ""){
alert("A valid email address is required.");
return false;
} if(document.getElementById('date').value == ""){
alert("Today's date is required.");
return false;
} if(document.getElementById('reason').value == ""){
alert("Reason for closing account is required.");
return false;
} } </script>
<form id="form" name="form" method="post" action="">
Please provide the following information:<p>
<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" id="name" id="name">
<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" id="email" id="email">
<label>Date
<span class="small">i.e. 03/10/2009</span>
</label>
<input type="text" name="date" id="date">
<label>Reason for Closing Account
<span class="small"></span>
</label>
<TEXTAREA NAME="reason" rows="3" id="reason"></TEXTAREA>
<input TYPE="button" NAME="submitbutton" VALUE="Submit" onclick="finalCheck()" />
<button TYPE=reset NAME="resetbutton" VALUE="Reset">Clear</button>
</div>
<div class="spacer"></div>
</form>
better still, u will also need to give your form data a final 'resting place' ie:-location
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1