Javascript form control element validation

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Ronald Raygun
    #1

    Javascript form control element validation

    I have a form on an HTML page with the usual user name, email etc. I
    want to be able to display a popup window (callout?) when a text input
    control element is clicked.

    For example, for the form:

    <form action="somethi ng.php" method="post">
    <label for="uname">Use r Name</label>
    <input type="text" id="uname"/>
    <input type="image" src="go.gif"/>
    </form>

    When the user clicks in the user name fields, I want to display a
    callout (or popup window), with the text:

    "The username must be at least 8 character long"

    does anyone know how to do this?
    Tags: None
    • Tom Cole
      #2
      Re: Javascript form control element validation

      On May 8, 6:44 am, Ronald Raygun <inva...@domain .comwrote:
      I have a form on an HTML page with the usual user name, email etc. I
      want to be able to display a popup window (callout?) when a text input
      control element is clicked.
      >
      For example, for the form:
      >
      <form action="somethi ng.php" method="post">
         <label for="uname">Use r Name</label>
         <input type="text" id="uname"/>
         <input type="image" src="go.gif"/>
      </form>
      >
      When the user clicks in the user name fields, I want to display a
      callout (or popup window), with the text:
      >
      "The username must be at least 8 character long"
      >
      does anyone know how to do this?
      To answer your question:

      <input type="text" id="uname" onfocus="alert( 'The username must be at
      least 8 character long');"/>

      I think you will find that this gets a bit tedious for the user. I
      would recommend just telling them right on the screen. Maybe something
      like:

      <form action="somethi ng.php" method="post">
      <table>
      <tr>
      <td><label for="uname">Use r Name</label></td>
      <td><input type="text" id="uname"/><br><label style="font-size:
      8pt;">Must be 8 characters</label></td>
      <td><input type="image" src="go.gif"/></td>
      </tr>
      </table>
      </form>

      Then, of course, you would perform some validation that 8 characters
      were actually entered before submitting. Maybe something like this:

      <script type="text/javascript">

      function checkDigits() {
      var uname = document.getEle mentById("uname ").value;
      if (uname.length == 8) {
      return true;
      }
      else {

      }
      }

      </script>
      ...

      <form action="somethi ng.php" method="post">
      <table>
      <tr>
      <td><label for="uname">Use r Name</label></td>
      <td><input type="text" id="uname"/><br><label style="font-size:
      8pt;">Must be 8 characters</label></td>
      <td><input type="image" src="go.gif" onclick="return
      checkDigits();"/></td>
      </tr>
      </table>
      </form>

      HTH...

        Comment

        • Tom Cole
          #3
          Re: Javascript form control element validation

          On May 8, 7:38 am, Tom Cole <tco...@gmail.c omwrote:
          On May 8, 6:44 am, Ronald Raygun <inva...@domain .comwrote:
          >
          >
          >
          >
          >
          I have a form on an HTML page with the usual user name, email etc. I
          want to be able to display a popup window (callout?) when a text input
          control element is clicked.
          >
          For example, for the form:
          >
          <form action="somethi ng.php" method="post">
             <label for="uname">Use r Name</label>
             <input type="text" id="uname"/>
             <input type="image" src="go.gif"/>
          </form>
          >
          When the user clicks in the user name fields, I want to display a
          callout (or popup window), with the text:
          >
          "The username must be at least 8 character long"
          >
          does anyone know how to do this?
          >
          To answer your question:
          >
          <input type="text" id="uname" onfocus="alert( 'The username must be at
          least 8 character long');"/>
          >
          I think you will find that this gets a bit tedious for the user. I
          would recommend just telling them right on the screen. Maybe something
          like:
          >
          <form action="somethi ng.php" method="post">
           <table>
                  <tr>
                          <td><label for="uname">Use r Name</label></td>
                          <td><input type="text" id="uname"/><br><label style="font-size:
          8pt;">Must be 8 characters</label></td>
                          <td><input type="image" src="go.gif"/></td>
                  </tr>
           </table>
          </form>
          >
          Then, of course, you would perform some validation that 8 characters
          were actually entered before submitting. Maybe something like this:
          >
          <script type="text/javascript">
          >
          function checkDigits() {
                  var uname = document.getEle mentById("uname ").value;
                   if (uname.length == 8) {
                       return true;
                   }
                   else {
          >
                   }
          >
          }
          >
          </script>
          ...
          >
          <form action="somethi ng.php" method="post">
           <table>
                  <tr>
                          <td><label for="uname">Use r Name</label></td>
                          <td><input type="text" id="uname"/><br><label style="font-size:
          8pt;">Must be 8 characters</label></td>
                          <td><input type="image" src="go.gif" onclick="return
          checkDigits();"/></td>
                  </tr>
           </table>
          </form>
          >
          HTH...- Hide quoted text -
          >
          - Show quoted text -
          Sorry, using Google Groups sucks beyond all belief...

          <script type="text/javascript">

          function checkDigits() {
          var uname = document.getEle mentById("uname ").value;
          if (uname.length == 8) {
          return true;
          }
          else {
          alert("Must be 8 characters.");
          return false;
          }

          }

          </script>
          ...

          <form action="somethi ng.php" method="post">
          <table>
          <tr>
          <td><label for="uname">Use r Name</label></td>
          <td><input type="text" id="uname"/><br><label
          style="font-size:
          8pt;">Must be 8 characters</label></td>
          <td><input type="image" src="go.gif" onclick="return
          checkDigits();"/></td>
          </tr>
          </table>
          </form>

          So now the alert only pops up when the don't follow instructions :)

          HTH

            Comment

            • Ronald Raygun
              #4
              Re: Javascript form control element validation



              Tom Cole wrote:
              On May 8, 7:38 am, Tom Cole <tco...@gmail.c omwrote:
              >
              >>On May 8, 6:44 am, Ronald Raygun <inva...@domain .comwrote:
              >>
              >>
              >>
              >>
              >>
              >>
              >>>I have a form on an HTML page with the usual user name, email etc. I
              >>>want to be able to display a popup window (callout?) when a text input
              >>>control element is clicked.
              >>
              >>>For example, for the form:
              >>
              >>><form action="somethi ng.php" method="post">
              >> <label for="uname">Use r Name</label>
              >> <input type="text" id="uname"/>
              >> <input type="image" src="go.gif"/>
              >>></form>
              >>
              >>>When the user clicks in the user name fields, I want to display a
              >>>callout (or popup window), with the text:
              >>
              >>>"The username must be at least 8 character long"
              >>
              >>>does anyone know how to do this?
              >>
              >>To answer your question:
              >>
              >><input type="text" id="uname" onfocus="alert( 'The username must be at
              >>least 8 character long');"/>
              >>
              >>I think you will find that this gets a bit tedious for the user. I
              >>would recommend just telling them right on the screen. Maybe something
              >>like:
              >>
              >><form action="somethi ng.php" method="post">
              ><table>
              > <tr>
              > <td><label for="uname">Use r Name</label></td>
              > <td><input type="text" id="uname"/><br><label style="font-size:
              >>8pt;">Must be 8 characters</label></td>
              > <td><input type="image" src="go.gif"/></td>
              > </tr>
              ></table>
              >></form>
              >>
              >>Then, of course, you would perform some validation that 8 characters
              >>were actually entered before submitting. Maybe something like this:
              >>
              >><script type="text/javascript">
              >>
              >>function checkDigits() {
              > var uname = document.getEle mentById("uname ").value;
              > if (uname.length == 8) {
              > return true;
              > }
              > else {
              >>
              > }
              >>
              >>}
              >>
              >></script>
              >>...
              >>
              >><form action="somethi ng.php" method="post">
              ><table>
              > <tr>
              > <td><label for="uname">Use r Name</label></td>
              > <td><input type="text" id="uname"/><br><label style="font-size:
              >>8pt;">Must be 8 characters</label></td>
              > <td><input type="image" src="go.gif" onclick="return
              >>checkDigits() ;"/></td>
              > </tr>
              ></table>
              >></form>
              >>
              >>HTH...- Hide quoted text -
              >>
              >>- Show quoted text -
              >
              >
              Sorry, using Google Groups sucks beyond all belief...
              >
              <script type="text/javascript">
              >
              function checkDigits() {
              var uname = document.getEle mentById("uname ").value;
              if (uname.length == 8) {
              return true;
              }
              else {
              alert("Must be 8 characters.");
              return false;
              }
              >
              }
              >
              </script>
              ...
              >
              <form action="somethi ng.php" method="post">
              <table>
              <tr>
              <td><label for="uname">Use r Name</label></td>
              <td><input type="text" id="uname"/><br><label
              style="font-size:
              8pt;">Must be 8 characters</label></td>
              <td><input type="image" src="go.gif" onclick="return
              checkDigits();"/></td>
              </tr>
              </table>
              </form>
              >
              So now the alert only pops up when the don't follow instructions :)
              >
              HTH

              Hi Tom, thanks for your response. I realized that I probably did not
              state my question correctly/clearly. The behaviour I want is different
              from that which you described. For one, I want to avoid using alert
              boxes (at least in this scenario) - as I agree with you that they can be
              very disuptive.

              The behaviour I want, is to display a "hint" (like the kind you get when
              you hover over a Microsoft Excel cell that has comments). So that when a
              user clicks in the username cell, they have a "hint" that gives them
              further info about the field, along with the opton to close the "hint".

              A crude drawing of the kind of "hint" I want to display is shown below:

              (--------------------------)
              ( Blah, blah, blah ... )
              ( ... )
              ( _______________ _______X )
              \/

              Where the X allows them to close the "hint" being displayed

              HTH

                Comment

                • Tom Cole
                  #5
                  Re: Javascript form control element validation

                  On May 8, 7:57 am, Ronald Raygun <inva...@domain .comwrote:
                  Tom Cole wrote:
                  On May 8, 7:38 am, Tom Cole <tco...@gmail.c omwrote:
                  >
                  >On May 8, 6:44 am, Ronald Raygun <inva...@domain .comwrote:
                  >
                  >>I have a form on an HTML page with the usual user name, email etc. I
                  >>want to be able to display a popup window (callout?) when a text input
                  >>control element is clicked.
                  >
                  >>For example, for the form:
                  >
                  >><form action="somethi ng.php" method="post">
                  >  <label for="uname">Use r Name</label>
                  >  <input type="text" id="uname"/>
                  >  <input type="image" src="go.gif"/>
                  >></form>
                  >
                  >>When the user clicks in the user name fields, I want to display a
                  >>callout (or popup window), with the text:
                  >
                  >>"The username must be at least 8 character long"
                  >
                  >>does anyone know how to do this?
                  >
                  >To answer your question:
                  >
                  ><input type="text" id="uname" onfocus="alert( 'The username must beat
                  >least 8 character long');"/>
                  >
                  >I think you will find that this gets a bit tedious for the user. I
                  >would recommend just telling them right on the screen. Maybe something
                  >like:
                  >
                  ><form action="somethi ng.php" method="post">
                  <table>
                         <tr>
                                 <td><label for="uname">Use r Name</label></td>
                                 <td><input type="text" id="uname"/><br><label style="font-size:
                  >8pt;">Must be 8 characters</label></td>
                                 <td><input type="image" src="go.gif"/></td>
                         </tr>
                  </table>
                  ></form>
                  >
                  >Then, of course, you would perform some validation that 8 characters
                  >were actually entered before submitting. Maybe something like this:
                  >
                  ><script type="text/javascript">
                  >
                  >function checkDigits() {
                         var uname = document.getEle mentById("uname ").value;
                          if (uname.length == 8) {
                              return true;
                          }
                          else {
                  >
                          }
                  >
                  >}
                  >
                  ></script>
                  >...
                  >
                  ><form action="somethi ng.php" method="post">
                  <table>
                         <tr>
                                 <td><label for="uname">Use r Name</label></td>
                                 <td><input type="text" id="uname"/><br><label style="font-size:
                  >8pt;">Must be 8 characters</label></td>
                                 <td><input type="image" src="go.gif"onc lick="return
                  >checkDigits(); "/></td>
                         </tr>
                  </table>
                  ></form>
                  >
                  >HTH...- Hide quoted text -
                  >
                  >- Show quoted text -
                  >
                  Sorry, using Google Groups sucks beyond all belief...
                  >
                   <script type="text/javascript">
                  >
                   function checkDigits() {
                           var uname = document.getEle mentById("uname ").value;
                            if (uname.length == 8) {
                                return true;
                            }
                            else {
                                alert("Must be 8 characters.");
                                return false;
                            }
                  >
                   }
                  >
                   </script>
                   ...
                  >
                   <form action="somethi ng.php" method="post">
                    <table>
                           <tr>
                                   <td><label for="uname">Use r Name</label></td>
                                   <td><input type="text" id="uname"/><br><label
                  style="font-size:
                   8pt;">Must be 8 characters</label></td>
                                   <td><input type="image" src="go.gif" onclick="return
                   checkDigits();"/></td>
                           </tr>
                    </table>
                  </form>
                  >
                  So now the alert only pops up when the don't follow instructions :)
                  >
                  HTH
                  >
                  Hi Tom, thanks for your response. I realized that I probably did not
                  state my question correctly/clearly. The behaviour I want is different
                  from that which you described. For one, I want to avoid using alert
                  boxes (at least in this scenario) - as I agree with you that they can be
                  very disuptive.
                  >
                  The behaviour I want, is to display a "hint" (like the kind you get when
                  you hover over a Microsoft Excel cell that has comments). So that when a
                  user clicks in the username cell, they have a "hint" that gives them
                  further info about the field, along with the opton to close the "hint".
                  >
                  A crude drawing of the kind of "hint" I want to display is shown below:
                  >
                  (--------------------------)
                  ( Blah, blah, blah ...     )
                  ( ...                      )
                  (  _______________ _______X )
                    \/
                  >
                  Where the X allows them to close the "hint" being displayed
                  >
                  HTH- Hide quoted text -
                  >
                  - Show quoted text -
                  I'm not sure I see the distinction between this and an alert box. They
                  both serve the same purpose, they make the user deal with a window
                  that they otherwis would not have to. If it's not the first time
                  they've been there, then they know this already, why make them search
                  for and click a button on a window (whether it's an alert box or a
                  pretty "comic book" styled window)? I personally feel that just
                  placing the statement unobtrusively within the form is a more user
                  friendly approach.

                  If this is the route you prefer, you could easily create a hidden div
                  with a transparent background and use your hint graphic as the
                  background. Then simply place it where you want it relative to input
                  field (style.top & style.left) and make id visible.

                  There are several threads here about just this sort of thing.

                  HTH.

                    Comment

                    Previous template Next
                    Working...