多部分表单验证答案

【问题标题】：multipart form validation多部分表单验证
【发布时间】：2012-06-14 17:16:58
【问题描述】：

所以我有一个包含文本、整数和文件上传字段的多部分表单。
我可以将 dataAnnotations 和 validationMessageFor 用于 text 和 int 字段，但不能用于文件上传。所以我实现了以下代码来验证文件上传：

$(document).ready(function() {
          $("#Error").hide();
          var pdfFile = '<%=Model.PdfFile %>';
          if (pdfFile == null || pdfFile1 == "") {
              $("#Submit").click(function() {
                  var ext = $('#File').val().split('.').pop().toLowerCase();
                  var file = $('#File').val();
                  if ((!file || ext != 'pdf')) {
                      $('#Error').show();
                      return false;
                  }
                  return true;
              });
          }
      });

据我目前所知，这段代码运行良好，但它在检查其他字段之前执行，因此看起来很草率。换句话说，如果用户在点击提交时表单上有多个错误，显示文件上传的验证消息，但不显示其他字段。如果用户随后上传了一个有效文件并再次单击提交，则会出现其他字段的验证消息。邋遢。所以我也尝试为文本框实现 jQuery 验证，但由于某种原因这不起作用：

$(document).ready(function () {
          $("#captionVal").hide();
          $("#Submit").click(function () {
              var caption = $("#Caption").val();
             if (!caption || caption == "") {
                  $("#captionVal").show();
                  return false;
              }
              return true;

          });
      });

它似乎总是将该字段读取为 null，因此它永远不会返回 true。

我尝试添加

$("Caption").change(function() {

还有

$("#Caption").bind(function() {

前面的if语句，但无济于事。

我也尝试过使用 jQuery 验证

$(document).ready(function () {
         $("#term").validate();
      });

但这根本没有任何作用（也许我只是不明白如何使用插件？）

所以我的问题是，如何验证文本框？
我真正需要做的就是确保它们不为空，如果它们在提交点击时显示错误标签（不是弹出窗口）或者如何使用验证插件？我已经下载了 .zip 文件并添加（并引用了） .validate.js 文件，但是 .validate 方法似乎没有做任何事情？

【问题讨论】：

这句话与我有关：“我已经下载了.zip 文件并添加了.validate.js 文件...” - 特别是提到压缩文件似乎暗示您还没有解压缩 JS 文件。（毕竟，您如何获得插件应该无关紧要。）我的解释可能是错误的。您是否正在查看控制台并看到任何错误？
@Sparky672 我认为你读得太多了...
@Terry，也许吧，但至少让 OP 纠正我，毕竟我确实说过，“我的解释可能是错误的”。（请参阅 OP 对答案的第一条评论，“冒着听起来很愚蠢的风险，我想我可能不明白如何正确安装插件。”）
@Sparky672 特里说得对。我只是引用了错误的 js 文件（jquery-1.7.2.js 而不是 jquery.js）。不过谢谢你的提问！

标签： jquery validation jquery-plugins

【解决方案1】：

确保您的表单字段具有名称属性，并且您在插件声明期间或通过内置类功能指定验证规则。

您还可以在插件中添加自定义验证方法，并像已经内置的方法一样使用它：

例子：

<html>
<head>
   <script src="path/to/jquery.js">
   <script src="path/to/jquery-validator.js">
   <script>
    // Add a custom method for file validation (going off your logic - haven't tested)
    jQuery.validator.addMethod("file", function(value, element) { 
        var ext = value.split('.').pop().toLowerCase();
        return (!value || ext != 'pdf');
    }, "Please make sure your file has a valid PDF extension");

    // This will make the form pass all validation checks on submit and 
    //  display errors if any occur
    $('#myForm').validate();
   </script>
</head>
<body>
   <form id="myForm">
      <input type="text" name="email" class="required email" />
      <input type="text" name="username" class="required" />
      <input type="text" name="file" class="required file" />
      <input type="submit" value="Submit form and get your ass validated!" />
   </form>
</body>
</html>

自定义验证方法参考：http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage

编辑：刚刚注意到该插件内置了一个文件扩展名验证方法： http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

编辑 2： 以下是不使用自定义方法（使用我刚刚发现的内置方法）进行验证的方法：

<input type="text" name="file" />

    $('#myForm').validate({
         rules: {
            file: {
                required: true,
                accept: "pdf"
             }
         }
    });

【讨论】：

冒着听起来很愚蠢的风险，我想我可能不明白如何正确安装插件。我在 class="required" 上收到一个错误，它是一个未知的 CSS 类。
好的，我更新了使验证插件工作所需的一切（按适当的顺序）。不知道什么是“未知的 CSS 类”，CSS 类不应该针对任何东西进行验证。
@Jeff，特里刚刚说了什么。您不可能收到有关未知 CSS 类的错误。您可以使用任何类名，无论它是否已定义……您永远不会看到错误。究竟是什么导致了这个错误？
我猜它只是更锐利，无视。
@Terry，感谢您的回复。我能够让 .validate() 使用简单的表单在测试项目中工作，但由于某种原因，在我的实际项目中却没有使用更复杂的表单。可能是我的眼睛没有注意到的一些小差异。无论如何，我已经设法修复了原始问题中损坏代码中的逻辑（我引用的是输入 ID，而不是名称）。尽管如此，将其标记为答案，因为它肯定是一个有效的解决方案，并且可能对其他人有所帮助。再次感谢！