空白的电子邮件验证不需要输入

Question

我在基于 Laravel (5.7x) 的网络应用程序中使用最新版本的 jquery-validation (1.19.0) 并遇到了这个问题。

如果是空白（未填写）<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;
      }
    });

Answer 1

您没有正确初始化 jQuery 验证插件，因此由于 type="email" 属性，似乎 HTML5 验证正在接管。

您的代码：

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

您不应在 click 事件处理程序中包含 .validate()。 只需在页面加载时调用一次，click 将被自动捕获。 .validate() 方法主要用于表单上插件的初始化，而不是用于测试验证。
插件的Ajax belongs inside of the submitHandler function

代码应该更像这样：

$(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 字段仅在包含以下值时才有效：

演示：jsfiddle.net/shLx3b65/

注意：在使用 jQuery 验证插件时，使用 type="email" 实际上毫无意义。此插件禁用所有 HTML5 验证，并且该字段的行为与 type="text" 没有区别。当禁用 JavaScript 时，作为 HTML5 验证 "fallback" 也是毫无意义的，因为如果没有 JavaScript，您的 Ajax 将无法工作。

编辑:

根据更新的 OP，存在语法错误：

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

这个语法错误打破了 JavaScript 和 the HTML5 validation takes over 多亏了 type="email" 属性...就像我在这个答案的第一段中所说的那样。

添加这个缺失的逗号后，一切正常：

jsfiddle.net/8wxo4cdy/

Answer 2

哦，问题出在所用站点模板的主要设置中 Metronic。默认情况下，type="email" 有一个 validator.addMethod，看起来像这样。删除后它可以正常工作！

/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.");

空白的电子邮件验证不需要输入

Email validation of blank not required input

html

jquery

jquery-validate

metronic