Batch form validation

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • kevinmajor1@gmail.com
    #1

    Batch form validation

    Hello, all. I'm currently trying to write a script that will perform
    form validation upon submission. I know that more validation should be
    performed on the server's side...this is just a test to see if I can
    get the client side to work.

    My problem is that I'm trying to make a validator that is 100%
    separated from the XHTML code. I don't even want an event handler
    assignment in the form. Unfortunately, I can't see how to grab a hold
    of the form and pass it down to my subroutines. The code I'm using,
    which is all placed in a seperate .js file, is below:

    var W3CDOM = (document.creat eElement && document.getEle mentsByTagName) ;

    function init(){
    if (!W3CDOM) return;
    var inputform = document.getEle mentById('input form');
    inputform.onsub mit = validate;
    }

    function validate(evt){
    evt = (evt) ? evt : ((event) ? event : null);

    if(evt){
    var elem = (event.target) ? event.target : ((event.srcElem ent) ?
    event.srcElemen t : null);

    if(elem){
    if(isNotEmpty(e lem.name)){
    if(isName(elem. name)){
    if(isNotEmpty(e lem.password)){
    if(len16(elem.p assword)){
    if(isNotEmpty(e lem.email)){
    if(validEmail(e lem.email)){
    return true;
    }
    }
    }
    }
    }
    }
    }
    }

    return false;
    }

    function isNotEmpty(elem ){
    str = elem.value;
    re = /.+/;

    if(!str.match(r e)){
    return false;
    alert(elem + " is empty!");
    }

    else{
    return true;
    }
    }

    function isName(elem){
    str = elem.value;
    re = /[a-zA-Z]*([ a-zA-Z]+\-?)*/;

    if(!str.match(r e)){
    return false;
    alert(elem + " is not a name!");
    }

    else{
    return true;
    }
    }

    function len16(elem){
    str = elem.value;
    re = /\b.{16}\b/;

    if(!str.match(r e)){
    return false;
    alert("Your password is not 16 characters long!");
    }

    else{
    return true;
    }
    }

    function validEmail(elem ){
    str = elem.value;
    re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

    if(!str.match(r e)){
    return false;
    alert("You did not enter a valid e-mail address!");
    }

    else{
    return true;
    }
    }

    window.onload = init;

    My XHTML is as follows:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Test</title>
    <script type="text/javascript" src="validatefo rm.js"></script>
    <style type="text/css">

    form p label {
    font: bold 1em Arial, Helvetica, sans-serif;
    float: left;
    width: 30%;
    }

    form p {
    clear: left;
    margin: 0;
    padding: 5px 0 0 0;
    }

    input.txt {
    width: 200px;
    }

    fieldset.narrow {
    width: 450px;
    }

    </style>

    </head>

    <body>

    <form name="inputform " id="inputform" method="post" action="">
    <fieldset class="narrow"> <legend>Pleas e input your
    information</legend>
    <p><label for="name">Name :</label><input id="name" type="text"
    class="txt" /></p>
    <p><label for="password"> Password:</label><input id="password"
    type="password" class="txt" /></p>
    <p><label for="email">E-mail Address:</label><input id="email"
    type="text" class="txt" /></p>
    <p><input type="submit" name="submit" id="submit" value="Submit"
    /></p>
    </fieldset>
    </form>


    </body>

    </html>

    Like I said before, it doesn't appear that my script is getting the
    form as I don't even get the alert dialogue boxes to popup when I try
    submitting an empty form. Any ideas on what I'm doing wrong?

    Thanks. :)

    Tags: None
    • web.dev
      #2
      Re: Batch form validation


      kevinmaj...@gma il.com wrote:
      function validate(evt){
      evt = (evt) ? evt : ((event) ? event : null);
      >
      if(evt){
      var elem = (event.target) ? event.target : ((event.srcElem ent) ?
      event.srcElemen t : null);
      >
      if(elem){
      if(isNotEmpty(e lem.name)){
      if(isName(elem. name)){
      if(isNotEmpty(e lem.password)){
      if(len16(elem.p assword)){
      if(isNotEmpty(e lem.email)){
      if(validEmail(e lem.email)){
      return true;
      }
      }
      }
      }
      }
      }
      }
      }
      >
      return false;
      }
      [snip]

      Your main problem I would surmise is with the validate function. When
      you submit your form, although you have assigned an event handler to it
      via javascript, there is no 'evt' being passed to your function. Nor
      will it ever. Since you don't want to actually hard code the event
      handler on your form, then you can do the following instead with your
      function:

      function validate()
      {
      var myForm = document.forms["inputform"];

      if(myForm)
      {
      if(isNotEmpty(m yForm.elements["name"]))
      {
      //etc. etc.
      }
      }
      }

      You can also get rid of all your id's in your form and just assign the
      name attribute.

        Comment

        • kevinmajor1@gmail.com
          #3
          Re: Batch form validation


          web.dev wrote:
          kevinmaj...@gma il.com wrote:
          function validate(evt){
          evt = (evt) ? evt : ((event) ? event : null);

          if(evt){
          var elem = (event.target) ? event.target : ((event.srcElem ent) ?
          event.srcElemen t : null);

          if(elem){
          if(isNotEmpty(e lem.name)){
          if(isName(elem. name)){
          if(isNotEmpty(e lem.password)){
          if(len16(elem.p assword)){
          if(isNotEmpty(e lem.email)){
          if(validEmail(e lem.email)){
          return true;
          }
          }
          }
          }
          }
          }
          }
          }

          return false;
          }
          >
          [snip]
          >
          Your main problem I would surmise is with the validate function. When
          you submit your form, although you have assigned an event handler to it
          via javascript, there is no 'evt' being passed to your function. Nor
          will it ever. Since you don't want to actually hard code the event
          handler on your form, then you can do the following instead with your
          function:
          >
          function validate()
          {
          var myForm = document.forms["inputform"];
          >
          if(myForm)
          {
          if(isNotEmpty(m yForm.elements["name"]))
          {
          //etc. etc.
          }
          }
          }
          >
          You can also get rid of all your id's in your form and just assign the
          name attribute.

            Comment

            • kevinmajor1@gmail.com
              #4
              Re: Batch form validation

              web.dev wrote:
              kevinmaj...@gma il.com wrote:
              function validate(evt){
              evt = (evt) ? evt : ((event) ? event : null);

              if(evt){
              var elem = (event.target) ? event.target : ((event.srcElem ent) ?
              event.srcElemen t : null);

              if(elem){
              if(isNotEmpty(e lem.name)){
              if(isName(elem. name)){
              if(isNotEmpty(e lem.password)){
              if(len16(elem.p assword)){
              if(isNotEmpty(e lem.email)){
              if(validEmail(e lem.email)){
              return true;
              }
              }
              }
              }
              }
              }
              }
              }

              return false;
              }
              >
              [snip]
              >
              Your main problem I would surmise is with the validate function. When
              you submit your form, although you have assigned an event handler to it
              via javascript, there is no 'evt' being passed to your function. Nor
              will it ever. Since you don't want to actually hard code the event
              handler on your form, then you can do the following instead with your
              function:
              >
              function validate()
              {
              var myForm = document.forms["inputform"];
              >
              if(myForm)
              {
              if(isNotEmpty(m yForm.elements["name"]))
              {
              //etc. etc.
              }
              }
              }
              >
              You can also get rid of all your id's in your form and just assign the
              name attribute.
              Unfortunately, that doesn't seem to be working either. My updated code
              (with DOM Level 0 syntax for the form elements):

              function init(){
              if (!W3CDOM) return;
              var inputform = document.getEle mentByName('inp utform');
              inputform.onsub mit = validate;
              }

              function validate(){
              var form = document.getEle mentByName('inp utform');
              if(form){
              if(isNotEmpty(f orm.name)){
              if(isName(form. name)){
              if(isNotEmpty(f orm.password)){
              if(len16(form.p assword)){
              if(isNotEmpty(f orm.email)){
              if(validEmail(f orm.email)){
              return true;
              }
              }
              }
              }
              }
              }
              }

              return false;
              }

              I'm curious, why wouldn't an event be passed through the handler to the
              function its assigned (inputform.onsu bmit = validate;)? And, more to
              the point, why wouldn't the contents of the inputform variable be
              passed to the function in that assignment as well? I'm kinda lost....

                Comment

                • kevinmajor1@gmail.com
                  #5
                  Re: Batch form validation

                  Well, judging by what some debugging alert dialogue boxes are telling
                  me, I'm finally getting a handle on the form after the submit button is
                  clicked. Now, for some reason, it appears as though its inputs aren't
                  being passed to the subroutines correctly. I'm currently using the
                  following code (debugging alerts removed and I changed elem.name to
                  elem.username to avoid any naming conflicts -- my XHTML was adjusted
                  accordingly):

                  /* code start */
                  var W3CDOM = (document.creat eElement && document.getEle mentsByTagName) ;

                  function init(){
                  if (!W3CDOM) return;
                  var inputform = document.getEle mentById('input form');
                  inputform.onsub mit = validate;
                  }

                  function validate(evt){
                  evt = (evt) ? evt : ((event) ? event : null);

                  if(evt){
                  var elem = (evt.target) ? evt.target : ((evt.srcElemen t) ?
                  evt.srcElement : null);

                  if(elem){
                  if(isNotEmpty(e lem.username)){
                  if(isName(elem. username)){
                  if(isNotEmpty(e lem.password)){
                  if(len16(elem.p assword)){
                  if(isNotEmpty(e lem.email)){
                  if(validEmail(e lem.email)){
                  return true;
                  }
                  }
                  }
                  }
                  }
                  }
                  }
                  }

                  else {
                  return false;
                  }
                  }

                  function isNotEmpty(elem ){
                  str = elem.value;
                  re = /.+/;

                  if(!str.match(r e)){
                  return false;
                  alert(elem.id + " is empty!");
                  }

                  else{
                  return true;
                  }
                  }

                  function isName(elem){
                  str = elem.value;
                  re = /[a-zA-Z]*([ a-zA-Z]+\-?)*/;

                  if(!str.match(r e)){
                  return false;
                  alert(elem.valu e + " is not a name!");
                  }

                  else{
                  return true;
                  }
                  }

                  function len16(elem){
                  str = elem.value;
                  re = /\b.{16}\b/;

                  if(!str.match(r e)){
                  return false;
                  alert("Your password is not 16 characters long!");
                  }

                  else{
                  return true;
                  }
                  }

                  function validEmail(elem ){
                  str = elem.value;
                  re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

                  if(!str.match(r e)){
                  return false;
                  alert("You did not enter a valid e-mail address!");
                  }

                  else{
                  return true;
                  }
                  }

                  window.onload = init;
                  /* code end */

                  In the validate function, the elem variable IS getting the form id upon
                  form submission. I've also been able to verify that it can see its
                  inputs, so something like alert(elem.user name.id); will correctly
                  output the id of that input element.

                  So, since the elem variable is being assigned correctly after the event
                  is captured, why aren't the subroutines working at all? I don't even
                  get the alert dialogue boxes for failed validation to appear when I try
                  submitting an empty form.

                    Comment

                    • Dr John Stockton
                      #6
                      Re: Batch form validation

                      JRS: In article <1157148578.860 260.300450@m73g 2000cwd.googleg roups.com>
                      , dated Fri, 1 Sep 2006 15:09:38 remote, seen in
                      news:comp.lang. javascript, kevinmajor1@gma il.com posted :
                      if(elem){
                      if(isNotEmpty(e lem.username)){
                      if(isName(elem. username)){
                      if(isNotEmpty(e lem.password)){
                      if(len16(elem.p assword)){
                      if(isNotEmpty(e lem.email)){
                      if(validEmail(e lem.email)){
                      return true;
                      }
                      }
                      }
                      }
                      }
                      }
                      }
                      }
                      >
                      else {
                      return false;
                      }
                      >}
                      More readable to use a series of if (!OK) return false followed by
                      return true.
                      >function isNotEmpty(elem ){
                      str = elem.value;
                      re = /.+/;
                      >
                      if(!str.match(r e)){
                      return false;
                      alert(elem.id + " is empty!");
                      The alert will never be executed; put it before return.
                      }
                      >
                      else{
                      return true;
                      }
                      else is not needed after return. Return is not like Result.
                      >}
                      >function isName(elem){
                      str = elem.value;
                      re = /[a-zA-Z]*([ a-zA-Z]+\-?)*/;
                      Use the i flag.


                      Some faults are repeated later.

                      --
                      © John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
                      <URL:http://www.jibbering.c om/faq/>? JL/RC: FAQ of news:comp.lang. javascript
                      <URL:http://www.merlyn.demo n.co.uk/js-index.htmjscr maths, dates, sources.
                      <URL:http://www.merlyn.demo n.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.

                        Comment

                        Previous template Next
                        Working...