it-swarm.com.de

Validieren Sie Formulareingabefelder mit Jquery

  1. Ich arbeite an der Formularvalidierung. Alles funktioniert gut, was ich eigentlich möchte: Ich möchte noch einige Eingabefelder hinzufügen, wie Kontrollkästchen, Optionsfeld, Auswahl- und Textbereich, Datei hochladen und so in die Form, in der ich sie auch validieren möchte.

  2. Ich habe den E-Mail-Eingabefehler funktioniert, aber er funktioniert nicht richtig, da er die E-Mail zuerst überprüfen und dann die Fehlermeldung entfernen sollte. Die Fehlermeldung wird jedoch erst nach der Eingabe einiger Zeichen entfernt.

  3. Ich möchte, dass die Telefonnummer bestätigt wird. Wie der Benutzer sollte 10 numerische Ziffern eingeben, die sich in Indien befinden, wenn in einem anderen Land, das sich unterscheidet, ich etwas verwirrt bin.

  4. Ich möchte, dass eine Erfolgsmeldung angezeigt wird, wenn alle Felder ordnungsgemäß geprüft wurden. Was ich versucht habe, ist folgendes: 

    $('.success_msg').fadeIn().delay(3000).fadeOut();
    $('input , textarea , select').val('').removeClass('valid');
    event.preventDefault();
    
  5. Ich möchte, dass alle Felder gelöscht werden, wenn alle Überprüfungen abgeschlossen sind und die Erfolgsmeldung gesendet wurde.

Kann mir jemand die richtige Richtung zeigen?

var Validator = function(formObject) {
  this.form = $(formObject);

  var Elements = {
    name: {
      reg: /^[a-zA-Z]{2,20}$/,
      error: "Not a valid name.",
    },

    email: {
      reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i,
      error: "Not a valid e-mail address.",
    },
    phone: {
      reg: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
      error: "Not a valid number.",
    },

    message: {
      reg: /^(?!\s*$).+/,
      error: "Message field cannot be empty.",
    },
  };

  var handleError = function(element, message) {
    element.addClass('input-error');
    var $err_msg = element.parent('div');
    $err_msg.find('.error').remove();
    var error = $('<div class="error"></div>').text(message);
    error.appendTo($err_msg);
    element.keyup(function() {
      $(error).fadeOut(1000, function() {
        element.removeClass('input-error');
      });
    });

  };

  this.validate = function() {
    var errorCount = 0;
    this.form.find("input, textarea").each(function(index, field) {
      var type = $(field).data("validation");
      var validation = Elements[type];
      if (validation) {
        if (!validation.reg.test($(field).val())) {
          errorCount++;
          handleError($(field), validation.error);
        }
      }
    })
    return errorCount == 0;
  };
};

$(function() {
  $("form#test").on("submit", function(event) {
    //event.preventDefault();
    return new Validator(this).validate(); // "this" here refers to the form

  })
})
body {
  background: #fff;
  color: #333;
  font: 76% Verdana, sans-serif;
}

form {
  margin: 1em 0 0 2em;
  width: 90%;
}

fieldset {
  margin: 0;
  border: 1px solid #ccc;
  padding-bottom: 1em;
}

legend {
  font-weight: bold;
  text-transform: uppercase;
}

label {
  float: left;
  width: 5em;
  padding-right: 2em;
  font-weight: bold;
}

div {
  margin-bottom: 30px;
}

input {
  font: 1em Verdana, sans-serif;
}

fieldset ul li input {
  float: left;
  width: 120px;
  border: 1px solid #ccc;
}

textarea {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  font: 1em Verdana, sans-serif;
}

form p {
  margin: 0;
  padding: 0.4em 0 0 7em;
}

form p input {
  background: #666;
  color: #fff;
  font-weight: bold;
}

div.error {
  clear: left;
  margin-left: 5.3em;
  color: red;
  padding-right: 1.3em;
  height: 100%;
  padding-bottom: 0.3em;
  line-height: 1.3;
}

.input-error {
  background: #ff9;
  border: 1px solid red;
}

.success_msg {
  width: 350px;
  line-height: 40px;
  border: 1px solid green;
  border-radius: 5px;
  background-color: rgba(213, 255, 187, 0.7);
  display: none;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="test">

  <fieldset>

    <legend>Contact information</legend>


    <div>
      <label for="firstname">Firstname:</label>
      <input type="text" name="firstname" id="firstname" data-validation="name" />
    </div>


    <div>
      <label for="lastname">Lastname:</label>
      <input type="text" name="lastname" id="lastname" data-validation="name" />
    </div>

    <div>
      <label for="email">Email:</label>
      <input type="email" name="email" id="email" data-validation="email" />

    </div>
    <div>
      <label for="phone">phone</label>
      <input type="number" name="phone" id="phone" data-validation="phone" />
    </div>

    <div>
      <label>Gender:</label>
      <input type="radio" name="gender" value="male" data-validation="gender" />
      <input type="radio" name="gender" value="female" data-validation="gender">
    </div>

    <div>
      <label>select</label>
      <input type="checkbox" name="checkbox" id="checkbox1" value="demo1" data-validation="checkbox" />
      <input type="checkbox" name="checkbox" id="checkbox2" value="demo2" data-validation="checkbox" />
      <input type="checkbox" name="checkbox" id="checkbox3" value="demo3" ata-validation="checkbox" />
    </div>

    <select data-validation="selectOption">
      <option value="">Select any option</option>
      <option value="red">Red</option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
    </select>

    <div>
      <label>Upload:</label>
      <input type="file" name="file" id="file" data-validation="file" />
    </div>

    <div>
      <label for="message">Message:</label>
      <textarea id="message" name="message" cols="30" rows="15" data-validation="message"></textarea>
    </div>

    <p><input type="submit" name="send" id="send" value="Send" /></p>

  </fieldset>
  <div class="success_msg">
    <p>Form submitted Successfully</p>
  </div>
</form>

Bitte zögern Sie nicht, Ihre Zweifel auszuräumen, bevor Sie Ihre Zeit in die Beantwortung der Frage investieren.

17

Ich hoffe, dass Sie dies erreichen wollten. Dies dauerte länger als erwartet, aber ich habe versucht, es zu erreichen. Dieses ganze Formular ist ein benutzerdefiniertes Formular. Sie könnten die vorhandenen Plugins verwenden, um dies zu erreichen. Wie auch immer, es dauerte viel Zeit, um es herauszufinden. Betrachten Sie die Frage, da die meisten Dinge funktionieren, ignorieren Sie, ob etwas nicht das ist, was Sie wollen.

$(document).ready(function() {

  /* contact form validation */
  var Validator = function(formObject) {
    this.form = $(formObject);
    var Elements = {
      name: {
        reg: /^[a-zA-Z ]{2,20}$/,
        require: true,
        error: "Not a valid name.",
      },

      email: {
        reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i,
        error: "Not a valid e-mail address.",
      },
      phone: {
        reg: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
        error: "Not a valid number.",
      },

      message: {
        reg: /^(?!\s*$).+/,
        error: "Message field cannot be empty.",
      },
      gender: {
        error: "gender is required",
      },
      selectOption: {
        error: "this field is required",
        required: true
      }
    };

    var handleError = function(element, message) {
      element.addClass('input-error');
      var $err_msg = element.parent('div');
      $err_msg.find('.error').remove();

      var error = $('<div class="error"></div>').text(message);
      error.appendTo($err_msg);
      console.log(element);


      element.on('keypress change', function() {
        $(error).fadeOut(1000, function() {
          console.log(element);
          element.removeClass('input-error');
        });
      });

    };

    /* Select Option */

    this.validate = function() {
      var errorCount = 0;

      this.form.find("select").each(function(index, field) {
        var type = $(field).data("validation");
        var validation = Elements[type];
        if ($(field).val() == "") {
          errorCount++;
          handleError($(field), validation.error);
        }
      });

      this.form.find("input, textarea").each(function(index, field) {
        var type = $(field).data("validation");
        var validation = Elements[type];
        if (validation !== undefined) {
          var re = new RegExp(validation.reg);
          if (validation) {
            if (!re.test($(field).val())) {
              errorCount++;
              handleError($(field), validation.error);
            }
          }
        }
      })

      /* Radio button */

      var radioList = $('input:radio');
      var radioNameList = new Array();
      var radioUniqueNameList = new Array();
      var notCompleted = 0;
      for (var i = 0; i < radioList.length; i++) {
        radioNameList.Push(radioList[i].name);
      }
      radioUniqueNameList = jQuery.unique(radioNameList);
      console.log(radioUniqueNameList);
      for (var i = 0; i < radioUniqueNameList.length; i++) {
        var field = $('#' + radioUniqueNameList[i]);
        var type = field.data("validation");
        var validation = Elements[type];
        if ($('input[name=' + type + ']:checked', '#test').val() == undefined) {
          errorCount++;
          handleError($(field), validation.error);
        }
      }

      return errorCount == 0;
    };
  };

  /* Submit form*/

  $(function() {

    $("form#test").on('submit', function(e) {
      var NoErrors = new Validator(this).validate();
      if (NoErrors == true) {
        $.ajax({
          url: this.action,
          type: this.method,
          data: $(this).serialize(),
          success: function() {
            // AJAX request finished, handle the results and error msg
            $('.success_msg').fadeIn().delay(3000).fadeOut();
            $('input[type!="submit"], textarea').val('').removeClass('error');
          }
        });

      }
      return false;
    })

  })

});
body {
  background: #fff;
  color: #333;
  font: 76% Verdana, sans-serif;
}

form {
  margin: 1em 0 0 2em;
  width: 90%;
}

fieldset {
  margin: 0;
  border: 1px solid #ccc;
  padding-bottom: 1em;
}

legend {
  font-weight: bold;
  text-transform: uppercase;
}

label {
  float: left;
  width: 5em;
  padding-right: 2em;
  font-weight: bold;
}

div {
  margin-bottom: 30px;
}

input {
  font: 1em Verdana, sans-serif;
}

fieldset ul li input {
  float: left;
  width: 120px;
  border: 1px solid #ccc;
}

textarea {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  font: 1em Verdana, sans-serif;
}

form p {
  margin: 0;
  padding: 0.4em 0 0 7em;
}

form p input {
  background: #666;
  color: #fff;
  font-weight: bold;
}

div.error {
  clear: left;
  margin-left: 5.3em;
  color: red;
  padding-right: 1.3em;
  height: 100%;
  padding-bottom: 0.3em;
  line-height: 1.3;
}

.input-error {
  background: #ff9;
  border: 1px solid red;
}

.success_msg {
  width: 350px;
  line-height: 40px;
  border: 1px solid green;
  border-radius: 5px;
  background-color: rgba(213, 255, 187, 0.7);
  display: none;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="#" method="post" id="test">
  <fieldset>

    <legend>Contact information</legend>


    <div>
      <label for="firstname">Firstname:</label>
      <input type="text" name="firstname" id="firstname" data-validation="name" />
    </div>


    <div>
      <label for="lastname">Lastname:</label>
      <input type="text" name="lastname" id="lastname" data-validation="name" />
    </div>

    <div>
      <label for="email">Email:</label>
      <input type="email" name="email" id="email" data-validation="email" />

    </div>
    <div>
      <label for="phone">phone</label>
      <input type="number" name="phone" id="phone" data-validation="phone" />
    </div>

    <div>
      <label>Gender:</label>
      <input type="radio" name="gender" value="male" data-validation="gender" />
      <input type="radio" name="gender" value="female" data-validation="gender">
    </div>

    <select data-validation="selectOption">
      <option value="">Select any option</option>
      <option value="red">Red</option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
    </select>

    <div>
      <label for="message">Message:</label>
      <textarea id="message" name="message" cols="30" rows="15" data-validation="message"></textarea>
    </div>

    <p><input type="submit" name="send" id="send" value="Send" /></p>

  </fieldset>
  <div class="success_msg">
    <p>Form submitted Successfully</p>
  </div>
</form>

1
Mehraj Khan

Hier ist der Arbeitscode:

https://jsfiddle.net/bhumi/o2gxgz9r/47570/

Ich habe den Wähler geändert, um die ID zu verwenden 

Sie müssen einen Schleifen-in-Handle-Fehler verwenden:

var Validator = function(form) {

    this.form = $(form);

    var Elements = {
        name: {
            selector: $('input[type=text]'),
            reg: /^[a-zA-Z]{2,20}$/
        },

        email: {
            selector: $('input[type=email]'),
            reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i
        },

        message: {
            selector: $('textarea'),
            reg: /^\s+$/
        }
    };

    var handleError = function(element, message, v1) {
        if (v1.selector.length > 1) {
            var ss = v1.selector;

            $(ss).each(function(i, v) {
            $(v).removeClass('input-error');
            if($(v).val() == ''){
              $(v).addClass('input-error');
              var $err_msg = $(v).parent('div');
              if($(v).parent('div').find('.error').length == 0) {
                    var error = $('<div class="error"></div>').text(message);
               }else{
                    $(v).parent('div').find('.error').text('');
                    var error = $(v).parent('div').find('.error').text(message);
                    $(this).siblings('.error').show();
               }
               error.appendTo($err_msg);
             }else{
               $(v).siblings('.error').text('')
             }
             $(v).keyup(function() {
                 $(error).fadeOut(1000, function() {
                     element.removeClass('input-error');
                });
             });
          });
        } else {
            element.addClass('input-error');
            var $err_msg = element.parent('div');
            if(element.parent('div').find('.error').length == 0) {
                  var error = $('<div class="error"></div>').text(message);
             }else{
                  element.parent('div').find('.error').text('');
                  var error = element.parent('div').find('.error').text(message);
                  $(this).siblings('.error').show();
             }
            error.appendTo($err_msg);
            element.keyup(function() {
                $(error).fadeOut(1000, function() {
                    element.removeClass('input-error');
                });
            });
        }

    };

    this.validate = function() {

        this.form.submit(function(e) {

            for (var i in Elements) {

                var type = i;
                var validation = Elements[i];
                switch (type) {
                    case 'name':
                        if (!validation.reg.test(validation.selector.val())) {
                            handleError(validation.selector, 'Not a valid name.', validation);
                        }
                        break;
                    case 'email':
                        if (!validation.reg.test(validation.selector.val())) {
                            handleError(validation.selector, 'Not a valid e-mail address.', validation);
                        }
                        break;
                    case 'message':
                        if (validation.reg.test(validation.selector.val()) || validation.selector.val() == '') {
                        handleError(validation.selector, 'Message field cannot be empty.', validation);
                        }
                        break;
                    default:
                        break;


                }

            }

            e.preventDefault();
        });

    };
};

var validator = new Validator('#test');
validator.validate();
11
Bhumi Shah