javascript - 如果我的输入元素位于标签内，jQuery 验证是否有效？

Question

我有以下内容

function setupFormValidation() {
    $.validator.setDefaults({
      errorPlacement: function(error, element) {
        if (element.attr("name") === "resume") {
          $("#uploadFile").addClass("error");
          error.insertAfter("#uploadFile");
        } else {
          error.insertAfter(element);
        }
      },
      unhighlight: function(element, errorClass, validClass) {
        if ($(element).attr("name") === "resume")
          $("#uploadFile").removeClass("error");
        else {
          //default behavior
          $(element).removeClass(errorClass).addClass(validClass);
          $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
        }

      }

    });
    //form validation rules
    $("#job_form").validate({
      debug: true,
      rules: {
        name: "required",
        email: {
          required: true,
          email: true
        },
        confirm: {
          equalTo: "#email"
        },
        resume: {
          required: true,
          accept: 'docx|doc|odt|pdf'
        }
      },

      messages: {
        name: "Please enter your full name",
        email: "Please enter a valid email address",
        confirm: "Emails should match",
        resume: {
          required: "need a resume",
          accept: "we only accepted documents with extension .pdf, .doc, .docx, .odt"
        }
      },
      submitHandler: function(form) {
        form.submit();
      }

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="job_form" action="/submit" method="post" enctype="multipart/form-data" name="job_form">
  <input id="name" name="name" placeholder="Full Name" type="text" value="" />
  <input id="email" name="email" placeholder="Email Address" type="text" value="" />
  <input id="confirm" name="confirm" placeholder="Confirm Email Address" type="text" value="" />
  <textarea id="message" name="message" placeholder="Your message">
  </textarea>
  <div class="upload-info">
    <strong>Upload your resume</strong>
  </div>
  <label class="upload-btn">Browse
    <input id="resume" name="resume" type="file" />
  </label>
  <span id="uploadFile">No file selected</span>

  <button type="submit" class="send">Send Application</button>
</form>

但是，验证函数未检测到与名为 resume 的文件 input 相关的任何内容。以前可以用，但不知道发生了什么。但是，如果我从 label 中删除 input 标签并将其放在 textarea 之后，它就可以正常工作。有关如何调试此问题的任何指示吗？

Answer 1

我尝试了你的软件，发现你可能缺少一个包含。 仅当我添加第二个包含时，一切正常。

<script src="./jquery-validation-1.14.0/dist/jquery.validate.js"></script>
<script src="./jquery-validation-1.14.0/dist/additional-methods.js"></script>

这是因为“接受”规则是在附加方法中定义的。

$(function() {
            $.validator.setDefaults({
                errorPlacement: function(error, element) {
                    if (element.attr("name") === "resume") {
                        $("#uploadFile").addClass("error");
                        error.insertAfter("#uploadFile");
                    } else {
                        error.insertAfter(element);
                    }
                },
                unhighlight: function(element, errorClass, validClass) {
                    if ($(element).attr("name") === "resume")
                        $("#uploadFile").removeClass("error");
                    else {
                        //default behavior
                        $(element).removeClass(errorClass).addClass(validClass);
                        $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
                    }

                }

            });
            //form validation rules
            $("#job_form").validate({
                debug: true,
                rules: {
                    name: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    confirm: {
                        equalTo: "#email"
                    },
                    resume: {
                        required: true,
                        accept: 'docx|doc|odt|pdf'
                    }
                },

                messages: {
                    name: "Please enter your full name",
                    email: "Please enter a valid email address",
                    confirm: "Emails should match",
                    resume: {
                        required: "need a resume",
                        accept: "we only accepted documents with extension .pdf, .doc, .docx, .odt"
                    }
                },
                submitHandler: function (form) {
                    form.submit();
                }

            });
        });    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.min.js"></script>
<form id="job_form" action="/submit" method="post" enctype="multipart/form-data" name="job_form">
    <input id="name" name="name" placeholder="Full Name" type="text" value="" />
    <input id="email" name="email" placeholder="Email Address" type="text" value="" />
    <input id="confirm" name="confirm" placeholder="Confirm Email Address" type="text"value="" />
    <textarea id="message" name="message" placeholder="Your message">
</textarea>
    <div class="upload-info">
        <strong>Upload your resume</strong>
    </div>
    <label class="upload-btn"> Browse
        <input id="resume" name="resume" type="file" />
    </label>
    <span id="uploadFile">No file selected</span>

    <button type="submit" class="send">Send Application</button>
</form>