Loading ...
Sorry, an error occurred while loading the content.

Re: [JavaScript] form validation - how to access multiple validation functions?

Expand Messages
  • David Smart
    It is possible to write functions that will validate several fields of the one type. However, they will need to know which fields to validate. There are two
    Message 1 of 2 , Apr 30, 2007
    • 0 Attachment
      It is possible to write functions that will validate several fields of the
      one type. However, they will need to know which fields to validate. There
      are two ways to do this:

      1) Tell it - i.e. have a list of fields in some format, or
      2) Let it find them - i.e. have it look at all fields in the form and
      choose those it wants to validate, based on some criteria in the fields
      themselves.

      I usually go with the first approach. But I don't have a function to do all
      dates, and another to do all names, etc.

      What I do is have a function that will check one date field, a function that
      will check one text field, etc. I have probably a dozen different
      validation functions that I use unchanged with many pages.

      I then have a single "validate" function in my page, that has calls to these
      individual field checkers - one call per field. For instance, this is part
      of a validation from one page:

      function validate (form)
      {
      validatedOk = true;
      validateRequiredString ("Customer");
      validateRequiredString ("Product");
      validateRequiredNumber ("Order Size", 1);
      validateRequiredNumber ("Job Size", 1, "Order Size");
      etc
      return validatedOk;
      }

      These individual validate functions have developed over time and have
      optional parameters for testing upper and/or lower limits, etc. They also
      take a printable version of the field's name (e.g. "Order Size") for use in
      error messages, and transform that into the field name ("OrderSize") to
      access the field. They also set the focus on a field that's bad and don't
      check at all if a previous call has already set the global validatedOK
      Boolean to false.

      What this means is that my validation function is quite short and quickly
      tells me which fields I'm validating, so I can visually compare it to the
      form itself. Also, the validation "feel" is consistent in all my pages and
      users get familiar with it.

      Not saying that my solution is for everybody, but it works for my needs.

      Regards, Dave S

      PS One decision I made early was to have no more than one form per page and
      to always call it the same thing. This means that the form name is
      hard-coded into my validation routines, etc, and I don't need to keep
      passing it as a parameter. So that's why it's not in my function calls,
      above.

      ----- Original Message -----
      From: "flashqa1" <flashqa1@...>
      To: <JavaScript_Official@yahoogroups.com>
      Sent: Tuesday, May 01, 2007 7:24 AM
      Subject: [JavaScript] form validation - how to access multiple validation
      functions?


      > Hello everyone:
      >
      > I am doing a form validation exercise. On a single form I have text
      > fileds(for name, age etc), radio button, check box, selection list,
      > text area (for comments).
      >
      > a)I created to two separate functions to check name field(first and
      > last name) and age field.
      >
      > b) Now I want to group name fields and age field together and
      > validate the fields after user pressed submit button(access name_check
      > and age_check function in an exteranl JavaScript function)
      >
      > My approach is to have one checkFields function in which to call
      > check_age and check_name function. If age and name field are valid,
      > allow form to submit otherwise display proper warning message.
      >
      > My pseudo code for the implementation
      > <input type="submit" name="submit" value="Submit" onclick="call
      > checkField function">
      >
      > In my external JavaScript file
      >
      > function checkField()
      > {
      > call check_name function;
      > call check_age function;
      > }
      >
      > --Will my approach work in this case?
      >
      > --Please give me some suggestions on how to access multiple functions
      > in external JavaScript. (what kind of event handler shall I use?)
      >
      > --What's the good practice to follow when doing form validation. If
      > you know some good online tutorial/examples please share with me.
      >
      > Thanks for your help!
      >
      > Jeff
      > 4-30-07
      >
      >
      >
      >
      >
      > Visit http://aiaiai.com for more groups to join
      > Yahoo! Groups Links
      >
      >
      >
    • flashqa1
      Hello David: Thanks for post helpful hints for my question. I experienced with Tell it approach. My code is based on
      Message 2 of 2 , May 3, 2007
      • 0 Attachment
        Hello David:

        Thanks for post helpful hints for my question. I experienced with
        "Tell it" approach. My code is based on
        tutorial:http://www.higherpass.com/javascript/Tutorials/Javascript-Form-Validation/

        I used fields array to store form elements, have checks array to store
        a string used by switch statement.

        This method works but I felt it is length in a way that
        a) I need to know in advanced how many checks (based on the number of
        elements on the form) I want to do (initialize numChecks)

        b) I also needs to initialize fields array to corresponding form
        elements name. If there are 20 plus elements on the form, this array
        initialization process get annoying.

        Could you look at my code and give me some suggestions on how to
        improve based on first approach? I appreciateyour help!

        my code segment for validation:
        function check_field()
        {
        //var validatedOk = false;
        alert ("you entered check_field function");

        var numChecks = 3;

        var fields = new Array(numChecks - 1);
        var checks = new Array(numChecks - 1);
        var result=""; //boolean value used for return

        with(document.forms.account_form)
        {
        fields[0] = fname.value;
        alert(fields[0]);

        checks[0]= "firstName";

        fields[1] = lname.value;
        checks[1] = "lastName";
        alert(fields[1]);

        fields[2] = age.value;
        checks[2] = "age";
        alert(fields[2]);

        //use for loop to go through fields array
        for (i= 0; i<numChecks; i++)
        {
        var fieldValue = fields[i];

        switch (checks[i])
        {

        case "firstName":
        result = check_firstName(fieldValue);
        break;

        case "lastName":
        result = check_lastName(fieldValue);
        break;

        default:
        }

        }//end of for loop

        }//end of with statement

        }//end of function check_field

        function check_firstName(elementValue)

        --- In JavaScript_Official@yahoogroups.com, "David Smart"
        <smartware.consulting@...> wrote:
        >
        > It is possible to write functions that will validate several fields
        of the
        > one type. However, they will need to know which fields to validate.
        There
        > are two ways to do this:
        >
        > 1) Tell it - i.e. have a list of fields in some format, or
        > 2) Let it find them - i.e. have it look at all fields in the form and
        > choose those it wants to validate, based on some criteria in the fields
        > themselves.
        >
        > I usually go with the first approach. But I don't have a function
        to do all
        > dates, and another to do all names, etc.
        >
        > What I do is have a function that will check one date field, a
        function that
        > will check one text field, etc. I have probably a dozen different
        > validation functions that I use unchanged with many pages.
        >
        > I then have a single "validate" function in my page, that has calls
        to these
        > individual field checkers - one call per field. For instance, this
        is part
        > of a validation from one page:
        >
        > function validate (form)
        > {
        > validatedOk = true;
        > validateRequiredString ("Customer");
        > validateRequiredString ("Product");
        > validateRequiredNumber ("Order Size", 1);
        > validateRequiredNumber ("Job Size", 1, "Order Size");
        > etc
        > return validatedOk;
        > }
        >
        > These individual validate functions have developed over time and have
        > optional parameters for testing upper and/or lower limits, etc.
        They also
        > take a printable version of the field's name (e.g. "Order Size") for
        use in
        > error messages, and transform that into the field name ("OrderSize") to
        > access the field. They also set the focus on a field that's bad and
        don't
        > check at all if a previous call has already set the global validatedOK
        > Boolean to false.
        >
        > What this means is that my validation function is quite short and
        quickly
        > tells me which fields I'm validating, so I can visually compare it
        to the
        > form itself. Also, the validation "feel" is consistent in all my
        pages and
        > users get familiar with it.
        >
        > Not saying that my solution is for everybody, but it works for my needs.
        >
        > Regards, Dave S
        >
        > PS One decision I made early was to have no more than one form per
        page and
        > to always call it the same thing. This means that the form name is
        > hard-coded into my validation routines, etc, and I don't need to keep
        > passing it as a parameter. So that's why it's not in my function
        calls,
        > above.
        >
        > ----- Original Message -----
        > From: "flashqa1" <flashqa1@...>
        > To: <JavaScript_Official@yahoogroups.com>
        > Sent: Tuesday, May 01, 2007 7:24 AM
        > Subject: [JavaScript] form validation - how to access multiple
        validation
        > functions?
        >
        >
        > > Hello everyone:
        > >
        > > I am doing a form validation exercise. On a single form I have text
        > > fileds(for name, age etc), radio button, check box, selection list,
        > > text area (for comments).
        > >
        > > a)I created to two separate functions to check name field(first and
        > > last name) and age field.
        > >
        > > b) Now I want to group name fields and age field together and
        > > validate the fields after user pressed submit button(access name_check
        > > and age_check function in an exteranl JavaScript function)
        > >
        > > My approach is to have one checkFields function in which to call
        > > check_age and check_name function. If age and name field are valid,
        > > allow form to submit otherwise display proper warning message.
        > >
        > > My pseudo code for the implementation
        > > <input type="submit" name="submit" value="Submit" onclick="call
        > > checkField function">
        > >
        > > In my external JavaScript file
        > >
        > > function checkField()
        > > {
        > > call check_name function;
        > > call check_age function;
        > > }
        > >
        > > --Will my approach work in this case?
        > >
        > > --Please give me some suggestions on how to access multiple functions
        > > in external JavaScript. (what kind of event handler shall I use?)
        > >
        > > --What's the good practice to follow when doing form validation. If
        > > you know some good online tutorial/examples please share with me.
        > >
        > > Thanks for your help!
        > >
        > > Jeff
        > > 4-30-07
        > >
        > >
        > >
        > >
        > >
        > > Visit http://aiaiai.com for more groups to join
        > > Yahoo! Groups Links
        > >
        > >
        > >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.