Announcement

**blaze4218** · Sep 15, 2011, 12:05 PM

This is a Javascript question, not Ajax. A moderator should move this to the correct forum/thread...

To answer your question, you would just set the initial value of the input tag to blank, then add an onblur event handler to the tag, and either with a function call or an inline statement you could check the value of the input and display an alert if it is blank:

Code:

<input name="NecessaryInfo" value="" onblur="if(this.value=='')alert('This information is required');" />

Even better you could return focus to the input to stress your point (WARNING potentially hazardous as the user would not be able to leave the input field even if they change their mind about the form and decide to do something else...)

Code:

<input name="NecessaryInfo" value="" onblur="if(this.value==''){alert('This information is required');this.focus();}" />

But most importantly, in your scenario the user would have to have selected the input in the first place in order to even use the onblur... If the user already selected it and left it blank, it's probably because they are using the tab key to navigate your form and intend to come back to that field later. What I'm getting at is that if they leave that input blank they probably didn't even select it, and if they selected it, they probably didn't leave it blank... All of which renders the onblur useless!

The solution that I think your really looking for is to place the comment in the HTML that a given field is required. Then, if the user tries to submit, you check that field to make sure it was filled in, and block the form submission if it wasn't, also alert the user to the omission. I read the following in a tutorial a while back and have been using it for years. It works great and I hope you find it useful:

Code:

<script>
[COLOR="Blue"]function[/COLOR] Validator(theForm){

   [COLOR="Blue"]if[/COLOR] (theForm.Review.value == [COLOR="DarkRed"]""[/COLOR]){
      alert([COLOR="DarkRed"]"Please say a few words about your experience."[/COLOR]);
      theForm.Review.focus();
      [COLOR="Blue"]return false[/COLOR];
      }

   [COLOR="Blue"]if [/COLOR](theForm.Rating.value == 0){
      alert([COLOR="DarkRed"]"Please rate your experience."[/COLOR]);
      [COLOR="Blue"]return false[/COLOR];				// Required field failed validation: Prevent form submission
      }

   [COLOR="Blue"]if[/COLOR] (theForm.Name.value == [COLOR="Red"]""[/COLOR])
      theForm.Name.value = [COLOR="DarkRed"]"Anonymous"[/COLOR]		// Not required field: Ignore or update, but allow form submission

  [COLOR="Blue"] return[/COLOR];
   }
</script>
// HTML code here ...
  [COLOR="Blue"]<[/COLOR][COLOR="DarkRed"]form[/COLOR][COLOR="Red"] action[/COLOR][COLOR="Blue"]="reviews.asp?send=true"[/COLOR] [COLOR="Red"]method[/COLOR][COLOR="Blue"]="post"[/COLOR][COLOR="Red"] onSubmit[/COLOR][COLOR="Blue"]="return Validator(this);">[/COLOR]
// Rest of the form ...

Some people would say "STFG", but I think the point of this forum site is not to provide a simple tutorial on how to use onblur, or any other term in any other language, It's to guide each other in new languages, and to learn from the mistakes of our peers...

**DaveyErwin** · Sep 15, 2011, 08:30 PM

Originally posted by stevenmw View Post

How canI check to see if an input field is empty, and use the blur event event to display a message next to it that says "required" when it loses focus?

This one has the message beside the text box
that changes if the field is left blank but, I
also mostly agree with blaze4218 so instead
of onblur it changes the message onsubmit.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">
function validatit(frm){
 if(frm.uName.className=="warn" || frm.uName.value == ""){
   document.getElementById("uNmLb").className="warn";
   document.getElementById("uNmLb").innerHTML = "Hey, What cha name?";
   return false;
 }
}
</script>
<style type="text/css">
.inhr{color:inherit}
.warn{color:red;}
</style>
</head>
<body>
<form name="frm1" action="" onsubmit="return validatit(this)">
<p>
<input type="text" name="uName" id="uNm" value="Required" class="warn" value="Required"
onfocus="className='inhr';value='';onfocus=''" >
<label for="uNm" id="uNmLb">Enter Your Name</label><br>
<input type="submit">
</p>
</form>
</body>
</html>

Hello blaze4218 I think you were mostly
right on except Required means required,
don't submit with required fields blank
instead make them optional
if they are optional.

**blaze4218** · Sep 15, 2011, 09:43 PM

Great example DaveyErwin. I love code like that because it takes advantage of the relationship between HTML elements to make a way more concise and readable expression. Props! (and maybe a little jealous

)
I do have one comment about the following:

Originally posted by DaveyErwin View Post

mostly
right on except Required means required,
don't submit with required fields blank

Although I didn't properly answer the question by inserting the comment next to the input (thanx for not calling me on that too, sometimes I don't read the question all the way through

), in my example, none of the required fields were left blank on submission, the validator returned false for all required (but blank) fields. The "Name" field was not required in that example, and I left it in (it's from a real project) to demonstrate the difference between the required fields and the not-so-required fields. I don't know stevenmw's level of javascript understanding, but I figured leaving in the name input would aid comprehension by showing a "here's with, and here's without" example...

**DaveyErwin** · Sep 15, 2011, 10:00 PM

Originally posted by blaze4218 View Post

Great example DaveyErwin. I love code like that because it takes advantage of the relationship between HTML elements to make a way more concise and readable expression. Props! (and maybe a little jealous

)
I do have one comment about the following:

Although I didn't properly answer the question by inserting the comment next to the input (thanx for not calling me on that too, sometimes I don't read the question all the way through

), in my example, none of the required fields were left blank on submission, the validator returned false for all required (but blank) fields. The "Name" field was not required in that example, and I left it in (it's from a real project) to demonstrate the difference between the required fields and the not-so-required fields. I don't know stevenmw's level of javascript understanding, but I figured leaving in the name input would aid comprehension by showing a "here's with, and here's without" example...

I cannot take any credit for the code.
As many here already know it came from
a thread in this forum where Old Pedant
and others "skinned this cat" .(I just mangled it a little)

Yes I see your point on required and optional.

**blaze4218** · Sep 16, 2011, 01:05 AM

Either way, thanx for showing a codingforum.net noob that he should add more
//comments
to his code for Comprehenions sake... I promise to do better.

Announcement

Required Field using Blure Event

Required Field using Blure Event

Comment

Comment

Comment

Comment

Comment