Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Field Validation Error Message 1

Status
Not open for further replies.
likelylad

likelylad

IS-IT--Management
Jul 4, 2002
388
GB
I am new to javascript and I would like to validate a field.
If there is no information in the field then there is an error message on the html page.
When information is then entered the message will disappear.

This is the code that I have so far.
Code: 
<html>
<head>
<style type="text/css">
<!--
.errormessage {
background-color: Red;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: White
} 

-->
</style>

<script language="JavaScript">
function addCheck() {
if ((test.order_details.value.length==0) || (test.order_details==null)) {
somename.innerHTML="You Did Not Enter Any Order Details";
test.order_details.focus();
return false;
} 
else
{
somename.innerHTML="";
test.order_details1.focus();
}
}
</script>
</head>

<body>
<form name="test" method="POST" action="test.php">
<div>
<b>Order Details:</b><input type="Text" name="order_details" Size="60" onBlur=addCheck()><br><br></div>
<div class="errormessage" id="somename"></div>


<div>
<b>Order Details:</b><input type="Text" name="order_details1" Size="60" onBlur=addCheck1()><br><br>
</div>

<div id="Layer1" style="position:absolute; left:90px; top:530px; width:315px; height:37px; z-index:1">
  <input type="Submit" name="submit" value="Enter Information">
</div>

</form>

</body>

Most of this is doing what I want to do, however it is leaving the red bar across the page when information is entered.

I would be very grateful if someone could advise me on what to do next.
 
Sort by date Sort by votes
Here's how I'd go about this. Just have a div that contains the error message at all times, and show or hide it based on the situation.

Your javascript would look like this:
Code: 
<script type="text/javascript">
function addCheck() {
   if (!document.getElementById("order_details").value.length) {
      document.getElementById("somename").style.display = "block";
      document.getElementById("order_details").focus();
   } 
   else {
      document.getElementById("somename").style.display = "none";
      document.getElementById("order_details1").focus();
   }
}
</script>

Your HTML would look like this:
Code: 
<body>
<form name="test" method="POST" action="test.php">
<div>
<b>Order Details:</b><input type="Text" name="order_details" [!]id="order_details"[/!] Size="60" onBlur=addCheck()><br><br></div>
<div class="errormessage" id="somename">You Did Not Enter Any Order Details</div>

<div>
<b>Order Details:</b><input type="Text" name="order_details1" [!]id="order_details1"[/!] Size="60" onBlur=addCheck1()><br><br>
</div>

<div id="Layer1" style="position:absolute; left:90px; top:530px; width:315px; height:37px; z-index:1">
  <input type="Submit" name="submit" value="Enter Information">
</div>

</form>

</body>

Also, since I see you are using CSS, you should use it for the size of your textboxes.



[monkey][snake] <.
 
Upvote 0 Downvote
Almost perfect, thank you.

Where I first open the page, the error message opens up.

Is there a way of stopping this?
 
Upvote 0 Downvote
In your CSS, put this:

Code: 
.errormessage {
background-color: Red;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
[!]display:none;[/!]
color: White
}

[monkey][snake] <.
 
Upvote 0 Downvote
And I missed it, but you need to declare your CSS as this

#errormessage


# is used for IDs, and . is used for class names.

As you have it, it will work in IE (though it shouldn't) it won't work in FF though.

[monkey][snake] <.
 
Upvote 0 Downvote
How do I extend this to validate another field or 2

This is where I am so far

It just sends my PC processor up to 100%, so I am guessing it is going into some sort of loop.

Code: 
<script type="text/javascript">
function addCheck() {
if (!document.getElementById("order_details1").value.length) {
      document.getElementById("errormessage1").style.display = "block";
      document.getElementById("order_details1").focus();
   } 
   else {
      document.getElementById("errormessage1").style.display = "none";
      document.getElementById("order_details2").focus();
   }
}

function addCheck1() {
if (!document.getElementById("order_details2").value.length) {
      document.getElementById("errormessage2").style.display = "block";
      document.getElementById("order_details2").focus();
   } 
   else {
      document.getElementById("errormessage2").style.display = "none";
      document.getElementById("order_details3").focus();
   }
}

</script>

<body>
<form name="test" method="POST" action="test.php">
<div>
<b>Order Details:</b><input type="Text" name="order_details1" id="order_details1" Size="60" onBlur=addCheck()><br></div>
<div class="errormessage" id="errormessage1">You Did Not Enter Any Order Details</div>

<div>
<b>Order Details:</b><input type="Text" name="order_details2" id="order_details2" Size="60" onBlur=addCheck1()><br></div>
<div class="errormessage" id="errormessage2">You Did Not Enter The File Path</div>

<div>
<b>Order Details:</b><input type="Text" name="order_details3" id="order_details3" Size="60" onBlur=addCheck2()><br><br></div>

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
621
lexer
lexer
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
955
MDGarcia
MDGarcia
iambob
  • Locked
  • Question
Send message using Java
Replies
2
Views
178
iambob
iambob
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
185
ggriffit
ggriffit
JPSeo
  • Locked
  • Question
--How to implement req.body.param validation
Replies
0
Views
113
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top