2

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

如果为空白（未填写）<input type="email" name="email">，它会向我显示错误Enter a valid 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;
      }
    });
4

2 回答 2

3

哦，问题出在使用的站点模板Metronic的主要设置中。默认情况下有一个validator.addMethodfor 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.");
于 2018-12-20T06:28:30.510 回答
1

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

你的代码：

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

  1. 您不应该.validate()在click事件处理程序内部。 只需在页面加载时调用一次，就会click自动捕获。该.validate()方法主要用于在表单上初始化插件，而不是用于测试验证。

  2. Ajax 属于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字段仅在包含值时才被验证：

演示： jsfiddle.net/shLx3b65/

注意：使用type="email"jQuery Validate 插件时使用实际上毫无意义。此插件禁用所有 HTML5 验证，并且该字段的行为与type="text". 当 JavaScript 被禁用时，它作为 HTML5 验证“回退”也是毫无意义的，因为无论如何如果没有 JavaScript，您的 Ajax 将无法工作。

编辑：

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

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

由于该属性，此语法错误会破坏 JavaScript，并且HTML5 验证会接管type="email"......就像我在这个答案的第一段中所说的那样。

添加这个缺少的逗号后，一切都按预期工作：

jsfiddle.net/8wxo4cdy/

于 2018-12-19T16:49:16.720 回答