Form Validation prototype

  1. An oValidationConf global object to set up the inputs, validation types and messages
  2. In this prototype all alert messages appear in a shared div altogether, not separately following the input fields.
  3. To add in more elements for validation, you need to add the class in the HTML itself and do the config in the oValidationConf
  4. You can apply more than one validation method on one input field.
  5. You can have multiple forms in the page and define all of the configs together.
  6. form and element names are reserved for backend, We only define necessary fields by id and classnames. Frontend and Backend are independent.
  7. a callback function is called after all validations are done. You can choose to submit the form or do something else with it.
  8. fallback: it does a lot of dom access while initializing. I wish there's a better way to it.
  9. global config object on page

    oValidationConf = { 'someform': [ {'tag':'input','class':'js-name','validate':'empty','err':'Please fill in your name.'}, {'tag':'input','class':'js-email','validate':'email','err':'Please check your email format.'}, {'tag':'input','class':'js-url','validate':'url','err':'Please fill in a correct web url.'}, {'tag':'input','class':'js-title','validate':'empty','err':'Please fill in the title.'}, {'tag':'input','class':'js-title','validate':'max','limit':'27','err':'Please Limit your title to less than 54 characters.'}, {'tag':'textarea','class':'js-post','validate':'empty','err':'Please fill in the content'}, {'tag':'textarea','class':'js-post','validate':'max','limit':'2000','err':'Please limit your content to less than 40000 characters.'}, {'tag':'input','class':'js-sign','validate':'empty','err':'You have have content when you choose to attach signature.'}, {'tag':'input','class':'js-sign','validate':'max','limit':'20', 'err':'Please limit your signature to less than 40 characters.'} ], 'otherform': [ {'tag':'input', 'class':'js-key', 'validate':'empty', 'err':'Please enter keyword.'}, {'tag':'input', 'class':'js-item', 'validate':'num', 'err':'Please fill in the numbers correctly.'}, {'tag':'div', 'class':'js-cal', 'validate':'selectGroup', 'err':'Please choose the date range.'}, {'tag':'div', 'class':'js-type', 'validate':'radioGroup', 'err':'Please choose one of the search type.'}, {'tag':'div', 'class':'js-lang', 'validate':'checkboxGroup', 'err':'Please choose at least one language.'} ] };
    the tag of the element, could be input, textarea, or even div, span!
    the class of the element. We will use YAHOO.util.Dom.getElementsByClassName to get the elements
    validation mehtod to use, currenly available: "empty","max","number","email","url", you can add your own in the code too!
    The alert message to display.
    when you use "max" as a validation method, you get this extra field to put in the limit.
  10. prototype config

    var formValidate = new{'fid':'someform','globalConf':oValidationConf});
    form id
    the name of globalconfig object
Feb 2008
some form

some other form