Подтверждение адреса электронной почты не требуется вводить

Я использую последнюю версию jquery-validation (1.19.0) в веб-приложении на основе Laravel (5.7x) и имею эту проблему.

В случае отсутствия (не заполнено) <input type="email" name="email"> это показывает мне ошибку Введите действующий адрес электронной почты. Этот ввод не обязателен, поэтому мне нужна проверка только в случае заполнения этого ввода. Спасибо!

HTML часть

<form action="{{ route('posts-listing.store') }}" method="POST" class="m-form m-form--label-align-right" id="m_post_submit">
  <div class="modal-body">
    @csrf
    <div class="form-group m-form__group row">
      <label class="col-md-4 col-form-label">Name: <span class="text-danger">*</span></label>
      <div class="col-md-8">
        <input class="form-control m-input" type="text" placeholder="Enter name" name="name" autofocus>
      </div>
    </div>
    <div class="form-group m-form__group row">
      <label class="col-md-4 col-form-label" for="phone_country">Phone Number: <span class="text-danger">*</span></label>
      <div class="col-md-8">
        <div class="input-group m-input-group">
          <div class="input-group-prepend">
            <select class="form-control m-bootstrap-select m_selectpicker" name="phone_country" id="phone_country">
                <option value="1" selected title="SK">Slovakia (+421)</option>
                <option data-divider="true"></option>
                <option value="2" title="CZ">Czech (+420)</option>
            </select>
          </div>
          <input type="text" class="form-control" id="m_inputmask_phone" name="phone_number" placeholder="Enter phone number">
        </div>
      </div>
    </div>
    <div class="form-group m-form__group row">
      <label class="col-md-4 col-form-label">E-mail address:</label>
      <div class="col-md-8">
        <input class="form-control m-input" type="email" placeholder="Enter your email" name="email" autocomplete="off" required="false">
      </div>
    </div>
    <div class="form-group m-form__group row">
      <label class="col-md-4 col-form-label">Note:</label>
      <div class="col-md-8">
        <textarea class="form-control m-input" id="m_autosize_1" rows="3" placeholder="Enter your note..." name="notes"></textarea>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="submit" class="btn crud-submit btn-primary">{{ Auth::user()->hasRole('agent') ? "Add new" : "Send" }}</button>
  </div>
</form>

JavaScript -> это часть всего файла JS с другими функциями

    $('#m_post_submit').validate({
      rules: {
        name: {
          required: true
        },
        phone_number: {
          required: true,
          minlength: 12
        },
        email: {
          required: false
          email: true
        }
      },
      submitHandler: function(form) {
        form.ajaxSubmit({
          type: 'post',
          url: form.attr('action'),
          data: form.serialize(),
          success: function() {
            btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
            location.reload();
          }
        });
        return false;
      }
    });
Источник

2 ответа

Решение

Ну да ладно, проблема была в основных настройках используемого шаблона сайта Metronic. Есть validator.addMethod за type="email" по умолчанию и выглядит так. После удаления работает правильно!

/theme/default/src/js/framework/components/plugins/forms/jquery-validation.init.js

jQuery.validator.addMethod("email", function(value, element) {
    if (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)) {
        return true;
    } else {
        return false;
    }
}, "Please enter a valid Email.");
Источник

Вы неправильно инициализировали плагин jQuery Validate, поэтому кажется, что проверка HTML5 вступает во владение благодаря type="email" приписывать.

Ваш код:

$('#m_post_submit').click(function(e) {
    e.preventDefault();
    ....
    form.validate({ ... });
    ....
    form.ajaxSubmit({ ... });
});

  1. Вы не должны иметь .validate() внутри click обработчик события. Просто позвоните один раз при загрузке страницы и click будет захвачен автоматически. .validate() Этот метод в основном используется для инициализации плагина в вашей форме, а не для проверки правильности.

  2. Аякс принадлежит внутри submitHandler функция плагина.

Код должен выглядеть примерно так:

$(document).ready(function() {

    $('#yourform').validate({ // <- initializes plugin
        rules: {
            email: {
                email: true
            }
        },
        submitHandler: function(form) { // <- made for AJAX
            // AJAX goes here
            form.ajaxSubmit({ .... });
            return false;
        }
    });

});

В противном случае все, кажется, работает правильно. email Поле проверяется только тогда, когда оно содержит значение:

ДЕМО: https://jsfiddle.net/shLx3b65/

ПРИМЕЧАНИЕ. Использование type="email" практически бессмысленно при использовании плагина jQuery Validate. Этот плагин отключает все проверки HTML5, и поле ведет себя не так, как с type="text", Это также бессмысленно, поскольку проверка HTML5 "отступает", когда JavaScript отключен, так как ваш Ajax не будет работать без JavaScript в любом случае.

РЕДАКТИРОВАТЬ:

Согласно обновленному OP, существует синтаксическая ошибка:

email: {
    required: false // <- COMMA MISSING HERE
    email: true
}

Эта синтаксическая ошибка нарушает JavaScript, и проверка HTML5 вступает во владение благодаря type="email" атрибут... так же, как я заявил в самом первом абзаце этого ответа.

После добавления этой пропущенной запятой все работает как положено:

https://jsfiddle.net/8wxo4cdy/

Источник
Другие вопросы по тегам