//================================================================================================================================
// Geef inputs een required en/of een validate attribuut en dit script controleert ze voordat het formulier verzonden wordt
//
// Inputs met de tag required="true" moeten iets bevatten (na te zijn geTRIMed)
// Inputs met de tag validate="<type>" worden gecontroleerd op juiste invoer
// Als er onjuiste invoer is krijgt de gebruiker een foutmelding van alle verkeerde velden (in één alert)
// Er is een standaard foutmelding, maar je kunt de boodschap in de alert instellen door de input een msg="..." tag te geven
// Als er een "Annuleren" knop is die *wel* het formulier verzend, geef die dan de tag cancel="true" (geen controles dan)
//
// Mogelijke validate types: email (adres@domein.extensie)
//                           datum || date (dag-maand-jaar of dag/maand/jaar)
//                           postcode (4 cijfers, eventueel 1 spatie, 2 letters)
//                           bedrag || prijs || price (maximaal 2 decimalen, punt of komma als decimaalteken)
//                           integer
//                           float (punt of komma als decimaalteken, 1 of meer getallen voor en na het decimaalteken)
//                           url
//
// * prototypes.js moet geladen zijn
// * alle invoer wordt geTRIMed voordat het gecontroleerd wordt
// * textarea's worden ook meegenomen
// * ook geschikt voor meerdere forms
// * als een invoerveld disabled of readonly is word die niet gecontroleerd
// * aangezien ik forms meestal in een tabel zet:
//   als er geen msg is opgegeven en het formulier in een tabel staat wordt de tekst
//   van het vorige TD element als veldnaam in de foutmelding gebruikt (anders de naam of id van de input)
// * getest in IE en FF
//================================================================================================================================

  // de kleur die de tekst in het invoerveld heeft
  var normal_color = "black";

  // de kleur die de tekst in het invoerveld krijgt als er foute invoer in staat op dat moment
  var error_color = "red";

  var validate_on_submit = true;
  function cancel_validate() {validate_on_submit = false;}

  setup();



  function setup()
  {
    var inputs, textareas, objects, validate_type, cancel, submit;

    for (x = 0; x < document.forms.length; x++) document.forms[x].onsubmit = function() {return validate_input();}

    inputs = document.getElementsByTagName("input");
    textareas = document.getElementsByTagName("textarea");
    objects = merge_array(inputs, textareas);

    if (objects)
    {
      for (x = 0; x < objects.length; x++)
      {
        if (!objects[x].disabled && !objects[x].readOnly)
        {
          validate_type = objects[x].getAttribute("validate");
          cancel = (objects[x].getAttribute("cancel") == "true");
          submit = (objects[x].type == "submit");

          if (submit && cancel) addEvent(objects[x], "click", cancel_validate);

          if (validate_type) validate_type = validate_type;

          if (validate_type)
          {
            addEvent(objects[x], "keyup", validate_input_realtime);
            if (validate_type == "bedrag" || validate_type == "prijs" || validate_type == "price" || validate_type == "float")
            {
              addEvent(objects[x], "keyup", punt2komma);
            }
          }
        }
      }
    }
  }

  function validate_input(show_errors)
  {
    if (!validate_on_submit) return true;

    if (show_errors !== false) show_errors = true;

    var inputs, textareas, objects, value, type, std_msg, msg, full_msg, enter, required;
    var fields = new Array();

    var inputs = document.getElementsByTagName("input");
    var textareas = document.getElementsByTagName("textarea");
    var objects = merge_array(inputs, textareas);

    for (x = 0; x < objects.length; x++)
    {
      if (!objects[x].disabled && !objects[x].readOnly)
      {
        value = objects[x].value.Trim();
        required = (objects[x].getAttribute("required") == "true");
        validate_type = objects[x].getAttribute("validate");

        if (required && value == "") fields.push(objects[x]);
        else if (value != "")
        {
          if (validate_type == "prijs" || validate_type == "price") validate_type = "bedrag";
          if (validate_type == "date") validate_type = "datum";

          if (validate_type == "email" && !value.IsEmail()) fields.push(objects[x]);
          if (validate_type == "datum" && !value.IsDateNL()) fields.push(objects[x]);
          if (validate_type == "postcode" && !value.IsPostcodeNL()) fields.push(objects[x]);
          if (validate_type == "bedrag" && !value.IsPrice()) fields.push(objects[x]);
          if (validate_type == "integer" && !value.IsInteger()) fields.push(objects[x]);
          if (validate_type == "url" && !value.IsURL()) fields.push(objects[x]);
        }
      }
    }

    if (show_errors && fields.length > 0)
    {
      enter = "\n";
      full_msg = "";

      for (x = 0; x < fields.length; x++)
      {
        msg = fields[x].getAttribute("msg");
        if (msg) full_msg = full_msg + "* " + msg + enter;
        else full_msg = full_msg + "* " + "Ongeldige invoer voor het veld " + get_caption(fields[x]) + enter;
      }
      alert(full_msg);
      fields[0].focus();
    }

    return (fields.length == 0);
  }

  function get_caption(input)
  {
    var caption, tr, td, cellIndex;

    caption = "miauw";
    if (input.id) caption = input.id;
    if (input.name) caption = input.name;

    td = input.parentNode;
    if (td.cellIndex)
    {
      if (td.cellIndex > 0)
      {
        cellIndex = td.cellIndex - 1;
        tr = td.parentNode;
        caption = tr.cells[cellIndex].innerHTML.stripHTML().replace(/^\s+|(\s|:)+$/g, "");
      }
    }

    return caption;
  }

  function validate_input_realtime()
  {
    var text = this.value.Trim();
    var type = this.getAttribute("validate");
    var valid = true;

    if (type && text)
    {
      type = type.toLowerCase();

      if (type == "email" && !text.IsEmail()) valid = false;
      if ((type == "datum" || type == "date") && !text.IsDateNL()) valid = false;
      if (type == "postcode" && !text.IsPostcode()) valid = false;
      if ((type == "bedrag" || type == "prijs" || type == "price") && !text.IsPrice()) valid = false;
      if (type == "integer" && !text.IsInteger()) valid = false;
      if (type == "float" && !text.IsFloat()) valid = false;
      if (type == "url" && !text.IsUrl()) valid = false;

      if (valid) this.style.color = normal_color; else this.style.color = error_color;
    }
  }

  function punt2komma()
  {
    this.value = this.value.replace(/\./g, ",");
  }

  function merge_array(array1, array2)
  {
    var new_array = new Array();

    for (x = 0; x < array1.length; x++) new_array.push(array1[x]);
    for (x = 0; x < array2.length; x++) new_array.push(array2[x]);

    return new_array;
  }


  function addEvent(obj, type, fn)
  {
    if (obj.addEventListener) // FF
    {
      obj.addEventListener( type, fn, false );
    }
    else if (obj.attachEvent) // IE
    {
      obj["e"+type+fn] = fn;
      obj[type+fn] = function() {obj["e"+type+fn](window.event);}
      obj.attachEvent("on"+type, obj[type+fn]);
    }
    else obj["on"+type] = obj["e"+type+fn];
  }