Question

我正在基于Laravel（5.7x）的网络应用中使用最新版本的jquery-validation（1.19.0）。

如果为空白（未填充）None，则显示为错误输入有效的电子邮件。不需要此输入，因此仅在填充此输入的情况下才需要验证。谢谢！

HTML部分

<input type="email" name="email">

JavaScript->这是整个JS文件以及其他功能的一部分

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

Answer 1

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

您的代码：

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

您不应该在.validate()事件处理程序中使用click。 只需在页面加载时调用一次，就会自动捕获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 Validate插件时，使用type="email"实际上毫无意义。此插件会禁用所有HTML5验证，并且该字段的行为与type="text"相同。当禁用JavaScript时，它作为HTML5验证的“后备”也毫无意义，因为如果没有JavaScript，您的Ajax便无法工作。

编辑：

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

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

由于type="email"属性，此语法错误破坏了JavaScript和the HTML5 validation takes over的作用，就像我在此答案的第一段中所述。

添加此缺少的逗号后，一切都会按预期进行：

jsfiddle.net/8wxo4cdy/

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

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

2 个答案: