Inline form validation help

Need help with javascript inline validation

Page 1 of 1

2 Replies - 1444 Views - Last Post: 05 June 2008 - 07:40 PM

#1 PHP_noob  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 05-June 08

Inline form validation help

Posted 05 June 2008 - 09:55 AM

Hi there please click on the following link:

http://www.interspir...Form-Validation

Right now I am interested in using inline form validation for my school project. The above link has the code, however only ONE red error message appears at a time in order from the top. Is there a way to code it such that all those empty fields will have an error message appearing beneath it? instead of only one field at a time?

<html>
<style>
  input {
  width: 200px;
  font-family: Tahoma;
  font-size: 8pt;
  }
  
  .label {
width:50px;
  }
  
  textarea {
width: 200px;
  font-family: Tahoma;
  font-size: 8pt;
  }
   
  body {
font-family: Tahoma;
  font-size: 8pt;
  }

  .error {
  font-family: Tahoma;
font-size: 8pt;
  color: red;
  margin-left: 50px;
  display:none;
  }
  
</style>
  
<script>
  function checkForm() {
name = document.getElementById("name").value;
  email = document.getElementById("email").value;
  comment = document.getElementById("comment").value;
  
  if (name == "") {
  hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
  return false;
  } else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
  return false;
  } else if (comment == "") {
hideAllErrors();
document.getElementById("commentError").style.display = "inline";
document.getElementById("comment").select();
document.getElementById("comment").focus();
  return false;
  }
  return true;
  }
 
  function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("commentError").style.display = "none"
  }
</script>
  
<body>
<form onsubmit="return checkForm();" method=post action="myscript.php">
<span class=label>Name:</span><input type=text value="" id=name><br>
<div class=error id=nameError>Required: Please enter your name<br></div><br>
<span class=label>Email:</span><input type=text value="" id=email><br>
<div class=error id=emailError>Required: Please enter your email address<br></div><br>
<span class=label>Comment:</span><textarea type=text value="" id=comment></textarea><br>
<div class=error id=commentError>Required: Please enter a comment<br></div><br>
<input type=submit value=Submit style="margin-left: 50px">
</form>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Inline form validation help

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 919
  • View blog
  • Posts: 6,443
  • Joined: 07-September 06

Re: Inline form validation help

Posted 05 June 2008 - 02:52 PM

Okay, yes there is a way to get things to show all errors that there are currently on the form, here is an edited version of your code:

Quote

<html>
<style>
input {
width: 200px;
font-family: Tahoma;
font-size: 8pt;
}

.label {
width:50px;
}

textarea {
width: 200px;
font-family: Tahoma;
font-size: 8pt;
}

body {
font-family: Tahoma;
font-size: 8pt;
}

.error {
font-family: Tahoma;
font-size: 8pt;
color: red;
margin-left: 50px;
display:none;
}

</style>

<script>
function checkForm() {
name = document.getElementById("name").value;
email = document.getElementById("email").value;
comment = document.getElementById("comment").value;

error = 0;
hideAllErrors();

if (name == "") {
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
error = 1;
}
if (email == "") {
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
error = 1;
}
if (comment == "") {
document.getElementById("commentError").style.display = "inline";
document.getElementById("comment").select();
document.getElementById("comment").focus();
error = 1;
}
if(error == 1){
return false;
}
return true;
}

function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("commentError").style.display = "none"
}
</script>

<body>
<form onsubmit="return checkForm();" method=post action="myscript.php">
<span class=label>Name:</span><input type=text value="" id=name><br>
<div class=error id=nameError>Required: Please enter your name<br></div><br>
<span class=label>Email:</span><input type=text value="" id=email><br>
<div class=error id=emailError>Required: Please enter your email address<br></div><br>
<span class=label>Comment:</span><textarea type=text value="" id=comment></textarea><br>
<div class=error id=commentError>Required: Please enter a comment<br></div><br>
<input type=submit value=Submit style="margin-left: 50px">
</form>
</body>
</html>


I think that will do what you are wanting.

NOTE - Only tested in IE6
Was This Post Helpful? 0
  • +
  • -

#3 PHP_noob  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 05-June 08

Re: Inline form validation help

Posted 05 June 2008 - 07:40 PM

View PostBetaWar, on 5 Jun, 2008 - 02:52 PM, said:

Okay, yes there is a way to get things to show all errors that there are currently on the form, here is an edited version of your code:

Quote

<html>
<style>
input {
width: 200px;
font-family: Tahoma;
font-size: 8pt;
}

.label {
width:50px;
}

textarea {
width: 200px;
font-family: Tahoma;
font-size: 8pt;
}

body {
font-family: Tahoma;
font-size: 8pt;
}

.error {
font-family: Tahoma;
font-size: 8pt;
color: red;
margin-left: 50px;
display:none;
}

</style>

<script>
function checkForm() {
name = document.getElementById("name").value;
email = document.getElementById("email").value;
comment = document.getElementById("comment").value;

error = 0;
hideAllErrors();

if (name == "") {
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
error = 1;
}
if (email == "") {
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
error = 1;
}
if (comment == "") {
document.getElementById("commentError").style.display = "inline";
document.getElementById("comment").select();
document.getElementById("comment").focus();
error = 1;
}
if(error == 1){
return false;
}
return true;
}

function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("commentError").style.display = "none"
}
</script>

<body>
<form onsubmit="return checkForm();" method=post action="myscript.php">
<span class=label>Name:</span><input type=text value="" id=name><br>
<div class=error id=nameError>Required: Please enter your name<br></div><br>
<span class=label>Email:</span><input type=text value="" id=email><br>
<div class=error id=emailError>Required: Please enter your email address<br></div><br>
<span class=label>Comment:</span><textarea type=text value="" id=comment></textarea><br>
<div class=error id=commentError>Required: Please enter a comment<br></div><br>
<input type=submit value=Submit style="margin-left: 50px">
</form>
</body>
</html>


I think that will do what you are wanting.

NOTE - Only tested in IE6



Hey thanks for the reply bro, that works in IE7!

Another question, let's say there is another field call telephone number, and if that field is filled in but not in the correct format (alphabetical instead of numerical), I want a separate message to appear (e.g. Please enter a number). How should I go about doing that?

The code shall be revised to

<html>
<style>
input {
width: 200px;
font-family: Tahoma;
font-size: 8pt;
}

.label {
width:50px;
}

textarea {
width: 200px;
font-family: Tahoma;
font-size: 8pt;
}

body {
font-family: Tahoma;
font-size: 8pt;
}

.error {
font-family: Tahoma;
font-size: 8pt;
color: red;
margin-left: 50px;
display:none;
}

</style>

<script>
function checkForm() {
name = document.getElementById("name").value;
email = document.getElementById("email").value;
comment = document.getElementById("comment").value;
telephone = document.getElementById("telephone").value;

error = 0;
hideAllErrors(); 

if (name == "") {
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
error = 1;
}
if (email == "") {
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
error = 1;
}
if (telephone == "") {
document.getElementById("telephoneError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
error = 1;
}
if (comment == "") {
document.getElementById("commentError").style.display = "inline";
document.getElementById("comment").select();
document.getElementById("comment").focus();
error = 1;
}
if(error == 1){
return false;
}
return true;
}

function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("commentError").style.display = "none"
}
</script>

<body>
<form onsubmit="return checkForm();" method=post action="myscript.php">
<span class=label>Name:</span><input type=text value="" id=name><br>
<div class=error id=nameError>Required: Please enter your name<br></div><br>
<span class=label>Email:</span><input type=text value="" id=email><br>
<div class=error id=emailError>Required: Please enter your email address<br></div><br>
<span class=label>Telephone number:</span><input type=text value="" id=telephone><br>
<div class=error id=telephoneError>Required: Please enter your telephone number<br></div><br>
<span class=label>Comment:</span><textarea type=text value="" id=comment></textarea><br>
<div class=error id=commentError>Required: Please enter a comment<br></div><br>
<input type=submit value=Submit style="margin-left: 50px">
</form>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1