✔ Formular Überprüfung

versuch13 · 31. Oktober 2006

Ich versuche mich gerade daran Formulare vor dem absenden mit JavaScript zu überprüfen und nicht ausgefüllte Felder zu markieren. Es funktioniert soweit auch ganz gut. Nur bin ich nicht so JavaScript erfahren und daher interessiert mich einfach ob ich dass so gut gelöst habe? Ist das totaler Schwachsinn und viel einfacher und übersichtlicher zu realsieren? usw..

Es sollen einfach unausgefüllte Felder farblich markiert werden.

Code:

    formValidating = function(form) {
        var validateForm = document.getElementById(form);
        for(var i = 0; i < validateForm.length; i++) {
            var e = validateForm.elements[i];
            if(e.type != 'submit' && e.value.length <= 3) {                
                e.style.backgroundColor = "#ff0000";    
                e.previousSibling.style.color = "#ff0000";    
                var noGo = true;            
            } else if(e.type != 'submit' && e.value.length >= 3) {
                e.style.backgroundColor = "";
                e.previousSibling.style.color = "";
            }
        }
        if(noGo) {
            return false;
        }
    }

HTML:

<form ... onsubmit="return formValidating('form')" id="form">

So, außerdem hänge ich jetzt daran, wie ich nun Felder von der Überprüfung ausschließen kann. Hab dazu auch gar keine Idee die ich verfolgen könnte.

Wäre nett wenn sich dass mal wer anschaut. Danke.

Grüße

Quaese · 31. Oktober 2006

Hi,

Du könntest den Elementen, die nicht geprüft werden sollen, einen Klassennamen geben. Im Script testest Du
anhand dieses Namens, ob das Element getestet werden soll.

Im folgenden Beispiel werden Elemente mit dem Klassenname no-validate bei der Überprüfung
ausgeschlossen.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
// Klassenname angeben, der nicht validiert werden soll
var strKlassenName = "no-validate";

var strPattern = eval("/"+strKlassenName+"/");

function formValidating(objForm){
  var blnSend = true;

  // Formularelemente durchlaufen
  for(var i=0; i<objForm.elements.length; i++){
    var objElement = objForm.elements[i];

    // Falls das Element validiert werden soll
    if(objElement.className.search(strPattern) == -1){

      if(objElement.value.length <= 3) {
        objElement.style.backgroundColor = "#ff0000";
        objElement.previousSibling.style.color = "#ff0000";
        blnSend = false;
      } else if(objElement.value.length >= 3) {
        objElement.style.backgroundColor = "";
        objElement.previousSibling.style.color = "";
      }

    }
  }

  return blnSend;
}
 //-->
</script>
</head>
<body>
<form id="formID" method="get" action="" onsubmit="return formValidating(this);">
  <div><span>First: </span><input type="text" name="txtFirst" class="" value="first"></div>
  <div><span>Second: </span><input type="text" name="txtSecond" class="no-validate" value="second"> (* kein Pflichtfeld)</div>
  <div><span>Third: </span><input type="text" name="txtThird" class="klassenname1 no-validate klassenname2" value="third"> (* kein Pflichtfeld)</div>
  <div><span>Forth: </span><input type="text" name="txtForth" class="" value="forth"></div>
  <div><span>Fifth: </span><input type="text" name="txtFifth" class="" value="fifth"></div>
  <div><span>Sixth: </span><input type="text" name="txtSixth" class="" value="sixth"></div>
  <div><input type="submit" name="cmdSubmit" class="no-validate" value="Submit"></div>
</form>
</body>
</html>

Ciao
Quaese

versuch13 · 31. Oktober 2006

Vielen Dank! Das war auch mein Gedanke, nur wußte ich es nicht umzusetzen. Jetzt schau ich mir das erstmal genauer an. Danke nochmal.

✔ Formular Überprüfung

versuch13

Erfahrenes Mitglied

Quaese

Moderator

versuch13

Erfahrenes Mitglied

Neue Beiträge