: javascript

Validation de formulaire

Exemple de formulaire html

<form id='f1' action='test.php' method="get">
<label class='req' for='f1_nom'>Nom</label>
<input id='f1_nom' type="text" name="nom" />
<label for='f1_prenom'>Prénom</label>
<input id='f1_prenom' type="text" name="prenom" />
<label class='req' for='f1_ec'>Etat civil</label>
<select name='etat_civil' id='f1_ec'>
  <option value=''>--Choisir--</option>
  <option value='Cel'>Célibataire</option>
  <option value='Mar'>Marié</option>
  <option value='Div'>Divorcé</option>
</select>
<input type="submit" value="Envoyer" />
</form>

Exemple de script de validation de formulaire

var TXT_ERRMSG_REQUIRED = "Le champ '{0}' est requis";

// affiche un message en substituant les parametre à un message type
function _message(message) {
        for(var i=1;i<_message.arguments.length;i++) {
                message = message.replace('{'+(i-1)+'}', _message.arguments[i]);
        }
        window.alert(message);
}

function addEvent(e, evType, fn) {
  if(e.addEventListener) {
    e.addEventListener(evType, fn, false); // sans capture
    return true;
  } else if (e.attachEvent) {
    var r = e.attachEvent("on"+evType, fn);
    return r;
  } else { return false; }
}

addEvent(window, 'load', initialisation);

function initialisation(event) {
        var forms = document.getElementsByTagName('form');
        for(var i=0;i<forms.length;i++) {
                addEvent(forms[i], 'submit', validation);
        }
}

function estVide(id, n) {
  var e = document.getElementById(id);
  var type = e.type ? e.type.toLowerCase() : (e.length ? e[0].type.toLowerCase() : '' );
  if(type=='select') {
    var v = e.options[e.selectedIndex].value;
    if(v.length!=0) return false;
  }
  else if(type=='radio') {
    var form = e.parentNode;
    while(form.tagName.toLowerCase()!='form') form = form.parentNode;
    var inputs = form.getElementsByTagName('input');
    for(var i=0;i<inputs.length;i++) if(inputs[i].name==e.name && inputs[i].checked) return false;
  }
  else {
    var v = e.value;
    if(v.length!=0) return false;
  }
  alert("Le champ " + n + " est obligatoire");
  e.focus();
  return true;
}

function testChamps(champs) {
  for(var i=0;i<champs.length;i++) {
    var label = champs[i];
        if(label.className!='req') continue;
        if( estVide(label.getAttribute('for'), label.innerHTML) ) return true;
  }
  return false;
}

function validation(event) {
  if( testChamps(this.getElementsByTagName('label')) ) {
          var event = event || window.event;
          if (event.preventDefault) { // Standard
                event.preventDefault();
          } else { // Pour IE
                event.returnValue = false;
          }
  }
}
Editer