Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Form validation complications

    Hi All,

    Currently learning javascript and I'm probably being a tad ambitious in my current task but I find this is usually the best way to learn.

    However, I'm a tad stumped. I'm trying to a create script that does form validation. I've borrowed some code from URL=http://www.xs4all.nl/~sbpoley/webmatters/formval.html]this site[/URL] because it gives the desired effect that I'm after. That is once the user types in the text it validates and displays a little caption underneath the title.

    I'll paste some of my adapted code.

    from code formValid.js
    Code:
    function validateNum    (vfld,   // element to be validated
                             ifld,   // id of element to receive info/error msg
                             reqd)   // true if required
    {
      var stat = commonCheck (vfld, ifld, reqd);
      if (stat != proceed) return stat;
    
      var tfld = trim(vfld.value);
      var ageRE = /^[0-9]{1,3}$/
      if (!ageRE.test(tfld)) {
        document.getElementById( \' + ifld + \' + ).style.visibility = "visible";)
        msg (ifld, "error", "not a valid number");
        setfocus(vfld);
        return false;
      }
      return true;
    };
    in the asp file:
    in the head..
    Code:
    <SCRIPT TYPE="text/javascript" src="formValid.js" ></SCRIPT>
    <style>
    .required {
      color: 'red';
      font-size: 10px;
      display: none;
    }
    .errHeader {
      padding-left: 5px;
      padding-bottom: 5px;
      font-size: 12px;
    }
    </style>
    in the body...
    Code:
    <SCRIPT TYPE="text/javascript">
    function checkform() {
          var elem;
          var errs=0;
    
          if (!validateNum    (document.forms.formerGrad.numReports,   'repNumErr',  false)) errs += 1; 
    
    //alerts? replace with html instead
          if (errs>1)  alert('There are fields which need correction before submitting');
          if (errs==1) alert('There is a field which needs correction before submitting');
    
          return (errs==0);
        };
    </SCRIPT>
    and finally in the table..
    Code:
    <form action="../scripts/formerGradSubmit.asp" name="formerGrad" method="post" onsubmit="return checkform();">
        
    <tr><td>Number of reports (if applicable) 
        <div id="repNumErr" class="required">This is Not a Valid Number</div></td>
        <td><input type="text" size="5" name="numReports" onchange="validateAge(this, 'repNumErr', false);"/></td>
    Any idea why it isn't validating the input fields correctly? I think its to do with the visibility settings but I'm not entirely sure how I should be changing them.
    If you need anymore details or info I'd be happy to oblige.

    Thanks in advance ,
    Richard

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    You only posted partial code, so now I have to ask a couple dumb questions.

    if (stat != proceed)
    Where is proceed defined? Or was that meant to be a string? You didn't post the function commonCheck, so I am not sure what it returns.

    document.getElementById( \' + ifld + \' + ).style
    You don't need to do that if ifld is a string that contains an id.
    document.getElementById(ifld).style
    should work fine.

    msg (ifld, "error", "not a valid number");
    Is msg defined?

    setfocus(vfld);
    Is setfocus defined?

    return (errs==0);
    };

    You don't need a semi-colon after a function definition.
    Not sure if that is a technical error or not.
    Javascript stops executing when an error occurs, so the first thing to do when something isn't working is to make sure it is error free.
    Run your script in Firefox and open up the javascript console to see if any errors are dispalyed.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    New Coder
    Join Date
    Sep 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi nikkiH,

    Thanks for your help so far. I've attached the code file I've been working on and I've added the bits of code you requested to this post.

    Here's the common check function
    Code:
    var proceed = 2;  
    
    function commonCheck    (vfld,   // element to be validated
                             ifld,   // id of element to receive info/error msg
                             reqd)   // true if required
    {
      if (!document.getElementById) 
        return true;  // not available on this browser - leave validation to the server
      var elem = document.getElementById(ifld);
      if (!elem.firstChild)
        return true;  // not available on this browser 
      if (elem.firstChild.nodeType != node_text)
        return true;  // ifld is wrong type of node  
    
      if (emptyString.test(vfld.value)) {
        if (reqd) {
          msg (ifld, "error", "required");  
          setfocus(vfld);
          return false;
        }
        else {
          msg (ifld, "warn", "");   // OK
          return true;  
        }
      }
      return proceed;
    };
    The addition semi collons after my functions is a habit from AS2.0 in flash. Not sure if it should make a difference because they're both ECMA spec languages aren't they? (Am I right in thinking that, lol)

    Made your suggested change to the validateNum function. Thanks for that!

    Set focus is defined here:
    Code:
    function setfocus(vfld)
    {
      glb_vfld = vfld;
      setTimeout( 'setFocusDelayed()', 100 );
    }
    It's to help fix an IE bug.

    Once again, many thanks for your help.

    Richard
    Attached Files Attached Files

  • #4
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    It's a really, really bad idea to call a global
    var proceed = 2;

    then do

    function commonCheck
    ...
    return proceed;

    in a function that never used it to begin with. And that function returns false earlier!
    Keep the return type either a number, or a boolean. Not both.
    And don't return a global. Makes no sense.

    If you had a local of the same name as the global, that's just not a good idea either. Confuzzle yourself and anyone else reading your stuff later.

    Now, if what you meant to do was some sort of constant, JS doesn't have static values that cannot be changed. Be very, very careful doing this. Use all CAPS for names so people coming after you get an idea that they shouldn't assign that variable a new value. And comment in the def. that it is mean to be a constant.

    var RET_ERROR = 0; // constant -- do not modify
    var RET_NO_PROCEED = 1; // constant -- do not modify
    var RET_PROCEED = 2; // constant -- do not modify

    then in the function you can do this instead of the return true/false/proceed thing
    if (!elem.firstChild)
    return RET_ERROR; // not available on this browser
    ...
    return RET_PROCEED;

    and it makes more sense to someone reading the code.
    (well, to many people, anyway, especially C coders LOL)

    That said, I missed something.
    if (!validateNum (document.forms.formerGrad.numReports
    should be
    if (!validateNum (document.formerGrad.numReports

    But basically, what ends up happening is that you're using boolean syntax on a function that ultimately may not return a boolean. (note: what actually happens may return a boolean, but it is not guaranteed)

    if (!validateNum
    ...
    validateNum:
    var stat = commonCheck (vfld, ifld, reqd);
    if (stat != proceed) return stat;
    ...
    commonCheck :
    return proceed;

    So, nothing guarantees that commonCheck returns boolean, yet later its value is used in !validateNum.
    Error or not, it's bad coding that is error prone. I'd fix it up whether or not is was the ultimate cause of the problem, then use
    if (validateNum != RET_PROCEED) or some such.
    Or just use ALL booleans and no ints.

    Anyway, that was long-winded. LOL

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #5
    New Coder
    Join Date
    Sep 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi NikkiH,

    Thanks for the help, I've implemented the changes suggested to the best of my ability but I'm still having problems . Running the script with the FF javascript console it claims that validateNum has not been declared, although just from looking at the scripts I'm pretty sure it has. I've attached the JavaScript file, since this is the only file I've made changes to.

    Cheers,
    Richard
    Attached Files Attached Files

  • #6
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    That's the error you get when the function has a syntax error.
    Like the closing parens with no open parens here.

    document.getElementById(ifld).style.visibility = "visible"

    Which makes it undefined for some odd reason in FF. MSIE gave a better error message for once and told me the line number the error was on.

    Edit:
    Oh, there are other syntax errors in there, too.
    Copy/paste error: same error in validateString function with the extra parens
    Regex error: missing end '/'
    var strRE = /^[A-Za-z]*/

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #7
    New Coder
    Join Date
    Sep 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've corrected the error on line 139 and on 159. What are the other ones you spotted? I can't see them.
    Cheers,
    Richard

  • #8
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Just the two I mentioned, I think. The validateString had extra parens like the first one, and it also is missing the ending slash in the regexp.
    var strRE = /^[A-Za-z]*

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #9
    New Coder
    Join Date
    Sep 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's just that I'm still getting an error in IE saying "Object Expected" line 192 and I'm at a loss to explain this.

    Thanks for the help thus far.
    Attached Files Attached Files


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •