Web Analytics Made Easy -
StatCounter Required Field using Blure Event - CodingForum

Announcement

Collapse
No announcement yet.

Required Field using Blure Event

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Required Field using Blure Event

    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?
    Thanks!

  • #2
    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>
    function Validator(theForm){
    
       if (theForm.Review.value == ""){
          alert("Please say a few words about your experience.");
          theForm.Review.focus();
          return false;
          }
    
       if (theForm.Rating.value == 0){
          alert("Please rate your experience.");
          return false;				// Required field failed validation: Prevent form submission
          }
    
       if (theForm.Name.value == "")
          theForm.Name.value = "Anonymous"		// Not required field: Ignore or update, but allow form submission
    
       return;
       }
    </script>
    // HTML code here ...
      <form action="reviews.asp?send=true" method="post" onSubmit="return Validator(this);">
    // 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...
    Last edited by blaze4218; Sep 16, 2011, 05:51 PM. Reason: added comments
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

    Comment


    • #3
      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.

      Comment


      • #4
        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...
        Allwisend bin ich nicht, doch viel ist mir bewursst
        -Goethe

        Comment


        • #5
          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.

          Comment


          • #6
            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.
            Allwisend bin ich nicht, doch viel ist mir bewursst
            -Goethe

            Comment

            Working...
            X