Ich weiß, dass es über das Internet unzählige Informationen gibt, mit denen Formulare in JavaScript und JQuery überprüft werden können. Aber ich bin daran interessiert, meine eigenen zu schreiben. Grundsätzlich möchte ich dieses Ding lernen.

Hier ist mein Validierungsskript, das ich geschrieben habe und das gut funktioniert.

function validate() {

        var firstName = jQuery("#firstName").val();
        var lastName = jQuery("#lastName").val();
        var dateOfBirthy = jQuery().val("dateOfBirth");

        if (firstName.length == 0) {
            addRemoveValidationCSSclass("#firstName", false);
        } else {
            addRemoveValidationCSSclass("#firstName", true);
        }

        if (lastName.length == 0) {
            addRemoveValidationCSSclass("#lastName", false);
        } else {
            addRemoveValidationCSSclass("#lastName", true);
        }
    }

    function addRemoveValidationCSSclass(inputField, isValid) {
        var div = jQuery(inputField).parents("div.control-group");
        if (isValid == false) {
            div.removeClass("success");
            div.addClass("error");
        } else if (isValid == true) {
            div.removeClass("error");
            div.addClass("success");
        } else {
        }
    }

Ich möchte ein paar Dinge erreichen ...

  1. Validierungsnachricht hinzufügen
  2. Allgemeinere Vorgehensweise für jedes Formular.
  3. Und ich möchte Validierungsregeln wie Länge, E-Mail-Validierung, Datumsvalidierung usw. hinzufügen.

Wie kann ich diese erreichen?

0
rokonoid 9 Okt. 2012 im 16:54

3 Antworten

Beste Antwort

Ich habe etwas Ähnliches gemacht, außer dass ich meine Regeln in PHP geschrieben habe, da Sie eine serverseitige Sicherung benötigen. Wenn PHP das Formular generiert, generiert es auch eine einfache clientseitige Validierung, die folgendermaßen aussieht:

<!-- html field -->
<label for="first">
  First Name: <input type="text" name="first" id="first">
  <span id="first_message"></span>
</label>

Dann ist das Skript wie folgt:

<script>
  var formValid = true;
  var fieldValid = true;

  // Check first name
  fieldValid = doRequiredCheck("first");
  if (!fieldValid) {formValid = false};
  fieldValid = doCheckLength("first", 25);
  if (!fieldValid) {formValid = false};

  function doRequiredCheck(id) {
    var el = document.getElementById(id);
    var box = document.getElementById(id + "_message";
    if (el.value === "") {
      box.innerHTML = "**REQUIRED**";
    }
  }

  function doCheckLength(id,len) {
    var el = document.getElementById(id);
    var box = document.getElementById(id + "_message";
    if (el.value.length > len) {
      box.innerHTML = "Too long";
    }
  }
</script>
1
Jeremy J Starcher 9 Okt. 2012 im 13:04

Verwenden Sie jQuery validate. Es macht alles, was Sie wollen, sofort.

2
Rory McCrossan 9 Okt. 2012 im 12:57

Erstellen Sie eine einfache Funktion:

function validations(day, hour, tap1, tap2, employed){
if( day== "" | hour== "" | tap1== "" | tap2== "" | employed== "" ){
    return false;
} else {
    return true;
}
0
Stephen Rauch 24 Apr. 2018 im 01:12