Проверьте все поля ввода одновременно на основе обязательного атрибута - PullRequest
Новая
       7

Проверьте все поля ввода одновременно на основе обязательного атрибута

0 голосов
/ 31 мая 2018

Я работал над формой с несколькими полями, такими как текст, число и текстовое поле.

Что мне нужно:

Я хочу проверить формус типом ввода, имеющим атрибут required все в одном условии, например, если мы выберем тип ввода в качестве текста, тогда все текстовые поля должны быть проверены вместе, такие как имя, сообщение, teaxtarea и все связанные текстовые поля (если есть).и в том же состоянии я хочу, чтобы другие поля ввода, такие как число, радио, флажок, выбор и файл, были проверены.

У меня есть свои отлично работающие пользовательские формы, но они основаны на Id's.Я хочу, чтобы он был основан на типе ввода с обязательным атрибутом (как упомянуто выше).На самом деле проблема с моими формами заключается в том, что если они у меня есть на основе идентификатора и когда у меня есть две-три формы на одной странице, которая становится конфликтующей.

Вот рабочая Fiddle сопровождается кодом. 

$(document).ready(function() {
  var Validator = function(form) {

    this.form = $(form);

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

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

      phone: {
        selector: $('#phone'),
        reg: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/
      },

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

    var handleError = function(element, message) {
      element.addClass('input-error');
      var $li = element.parent('<div>');
      var error = $('<div class="error"></div>').text(message);
      error.appendTo($li);
      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.');
              }
              break;
            case 'email':
              if (!validation.reg.test(validation.selector.val())) {
                handleError(validation.selector, 'Not a valid e-mail address.');
              }
              break;
            case 'string':
              if (validation.reg.test(validation.selector.val()) || validation.selector.val() == '') {
                handleError(validation.selector, 'Special characters now allowed or empty element.');
              }
              break;
            case 'empty':
              if (validation.reg.test(validation.selector.val()) || validation.selector.val() == '') {
                handleError(validation.selector, 'Message field cannot be empty.');
              }
              break;
            default:
              break;


          }

        }

        e.preventDefault();
      });

    };
  };

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

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" method="post" action="">

  <div id="note"></div>

  <div class="detail">
    <input type="text" id="name" name="name" autocomplete="off" required />
    <label for="name">Name</label>
  </div>
  <!--detail-->
  <div class="detail">
    <input type="text" id="email" name="email" autocomplete="off" required />
    <label for="email">Email</label>
  </div>
  <!--detail-->
  <div class="detail">
    <input type="number" id="phone" autocomplete="off" name="phone" required />
    <label for="phone">Phone Number</label>
  </div>
  <!--detail-->
  <div class="detail">
    <input type="text" id="enquiry" autocomplete="off" name="enquiry" required />
    <label for="enquiry">I want to know about...</label>
  </div>
  <!--detail-->
  <div class="detail message">
    <textarea type="text" id="message" autocomplete="off" name="message" required></textarea>
    <label for="message">Type your Message here</label>
  </div>
  <!--detail-->

  <!-- <div class="detail">
   <input type="radio" id="contact_male" name="gender" value="male" required />
							<input type="radio" id="contact_female" name="gender" value="female" required />
						</div>
  <detail-->


  <!-- <div class="detail">
  <input type="checkbox" id="contact_html" name="html" required />HTMl
							<input type="checkbox" id="contact_css" name="css" required />CSS
						</div>
  <detail-->


  <div class="btn-container" id="submit">
    <button type="submit">Submit</button>
  </div>

</form>

1 Ответ

0 голосов
/ 31 мая 2018

Вот что я делаю, когда имею дело с таким количеством полей ввода, получаю все элементы ввода через jquery и применяю вашу работу (то есть проверку) в цикле, что-то вроде этого: 

var items = $(parentElement).find("input,select");
for (var i = 0; i < items.length; i++)
            {
                var validator = new Validator(items[i]);
                validator.validate();
            }
...