0

所以我有一个包含文本、整数和文件上传字段的多部分表单。
我可以将 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 方法似乎没有做任何事情？

4

1 回答 1

4

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

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

例子：

<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"
             }
         }
    });
于 2012-06-14T17:33:57.530 回答