javascript - data - Valide los campos de entrada del formulario usando jquery

jquery selector

Question

1. Estoy trabajando en la validación de formularios. Todo funciona bien. Lo que realmente quiero es agregar más campos de entrada como casilla de verificación, botón de opción, seleccionar y área de texto, cargar archivo y demás en el formulario. También quiero que se validen.

2. Obtuve el error de entrada de correo electrónico funcionando pero no funciona correctamente, ya que primero debe validar el correo electrónico y luego debería eliminar el mensaje de error, pero está eliminando el mensaje de error justo después de ingresar algunos caracteres.

3. Quiero que el número de teléfono sea validado. Al igual que el usuario, debe ingresar 10 dígitos numéricos que se encuentran en la India, si en otro país será diferente, estoy un poco confundido sobre cómo hacerlo.

4. Quiero que aparezca un mensaje de éxito cuando todos los campos se validen correctamente como deberían. Lo que intenté es esto:

   $(''.success_msg'').fadeIn().delay(3000).fadeOut();
   $(''input , textarea , select'').val('''').removeClass(''valid'');
   event.preventDefault();

5. Quiero que todos los campos se borren cuando se realicen todas las validaciones y se envíe el mensaje de éxito.

¿Alguien puede señalarme en la dirección correcta?

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>

Por favor, siéntase libre de despejar sus dudas antes de invertir su tiempo en responder la pregunta.

Answer 1

Aquí está el código de trabajo:

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

He cambiado el selector para usar ID

Necesitas usar loop en el error de manejar:

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();

Answer 2

Espero que esto sea lo que estabas tratando de lograr. Esto tomó más tiempo de lo esperado pero traté de lograrlo. Todo este formulario es personalizado. Podrías haber usado los plugins existentes para lograrlo. De cualquier modo, tomó mucho tiempo resolverlo. Considere la pregunta ya que la mayoría de las cosas funcionan, ignore si algo no es lo que desea.

$(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>