JQuery 需要表单验证在 Chrome 浏览器中失败

Question

我正在使用 JQuery 来验证表单。该表单有两个字段。一个是文本，另一个是文件。每个字段都使用所需的方法。在没有选择名称或文件的情况下单击提交时，表单将在没有这两个值的情况下提交。

但是，这适用于桌面 Firefox 56.0，适用于我的 phone 的 Chrome 63.0.03239.11 但不适用于我的桌面 Chrome 版本 63.0.3239.108（官方构建）（ 64 位）。另外，我注意到，如果我没有以表单形式上传文件并且只是使用 $(form).serialize() 来捕获表单文本字段，则必需的验证有效。我应该就此提交 Chrome 错误报告吗？

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script> var myPath = "/timelines/post_photo.php";</script>

<form id="foo">                               
    <div class="form-group">
    <!-- Child id -->
    <label for="name">Child's name:</label>
    <select multiple class="form-control" name="child" id="name">
        <option style="display:none" disabled selected value></option>
        <option value="1"> Jim Bergin </option>
        <option value="2"> Harry Potter </option>
        <option value="3"> John Carpenter </option>
        <option value="4"> Johnny Ive </option>
        <option value="5"> Steve Jobs </option>
    </select>
    </div>

    <!-- Upload Photo -->
    <div class="form-group">
    <label for="photo">Upload photo:</label>
    <input type="file" class="form-control-file" name="photo" id="photo" />                                
    <img src="/timelines/images/loading.gif" class="img-fluid" id="loading-indicator" style="display:none" />
    <input type="submit" value="Submit" class="btn btn-primary">
    </div>
 </form>

验证脚本

$( document ).ready(function() {
    var request;

    $("#foo").validate({
            //Our required fields
            rules: {
                    child: {
                            required: true
                    },
                    photo: {
                            required: true
                    }
            },

            submitHandler: function(form) {
                    $('#loading-indicator').show();

                    //Create variable to hold the form data
                    var fd = new FormData($(this)[0]);                        

                    //Create request function
                    request = $.ajax({
                            url: myPath,
                            type: "POST",
                            enctype: 'multipart/form-data',
                            data: fd,
                            processData: false,
                            contentType: false,
                            cache: false
                    });

                    request.done(function(response) {
                        // Show and fade out success message                        
                    });

                    request.fail(function (response) {
                        // Show an error message                                
                    });
            }
    });
});

Answer 1

你这里有几个问题：

<select multiple class="form-control" name="child" id="name">
    <option style="display:none" disabled selected value></option>
    <option value="1"> Jim Bergin </option>
    <option value="2"> Harry Potter </option>
    <option value="3"> John Carpenter </option>
    <option value="4"> Johnny Ive </option>
    <option value="5"> Steve Jobs </option>
</select>

为了验证 select 元素，第一个 option 必须包含 value=""。由于您的仅包含 value，它可能被解释为 value="" 以外的内容，具体取决于浏览器。
你有display:none，所以验证插件可能不会考虑这个元素，因为默认情况下，隐藏元素被忽略。
你有 disabled 属性，所以验证插件可能也不会考虑这个元素。
最后，您有一个 selected 属性。因此，如果此 option 以编程方式为 "selected"，则自动满足 required 规则并且验证此元素没有意义。

我认为上面的四个要点彼此有些矛盾，因此可以解释为什么您在不同的浏览器中看到不同的结果。

JQuery 需要表单验证在 Chrome 浏览器中失败

JQuery form validation Required failing in Chrome browser

jquery

google-chrome

jquery-validate