Question

我正在使用Jquery插件来验证编辑表单。验证在创建表单中工作正常，但它不适用于编辑表单。

我的HTML

 <body>
 <div class="container">
 <h1 class="col-sm-offset-2">Edit Provider Details:</h1>
 <br />
<form class="form-horizontal" role="form" id="EditProviderDetailsForm"  method="post">
<div class="form-group">
     <label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
       <div class="col-sm-6">
          <input type="text" class="form-control" autofocus="autofocus"    placeholder="Enter the First Name" id="FirstName" data-bind="value:FirstName">
             </div>
      <label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
</div>
   <div class="form-group">
        <label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label>
       <div class="col-sm-6">
           <input type="text" class="form-control" data- bind="value:ContactNumber" placeholder="Enter the Contact Number"  id="ContactNumber" maxlength="13">
      </div>
         <label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
     </div>
   <div class="form-group">
         <label class="col-sm-2 control-label labelfont">EMAIL ADDRESS: </label>
        <div class="col-sm-6">
          <input type="text" class="form-control" data-    bind="value:ContactEmail" placeholder="Enter your email address"            id="EmailAddress">
        </div>
        <label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
       </div>
         <div class="form-group">
      <button type="submit" id="Update" class="btn btn-primary col-sm-1 col-       sm-offset-4">Update</button>
        <button type="button" id="Cancel" class="btn btn-primary col-sm-          1">Reset</button>
     </div>
   </form>
  </div>               
    </body>

JavaScript是

$(document).ready(function () {
 jQuery.validator.addMethod("AcceptEmail", function (value, element) {
return this.optional(element) || /^([\w\d\-\.]+)@{1}(([\w\d\-]{1,67})|   ([\w\d\-]+\.[\w\d\-]{1,67}))\.(([a-zA-Z\d]{2,4})(\.[a-zA-Z\d]     {2})?)$/.test(value);
});
 $("#EditProviderDetailsForm").validate({
   onfocusout: function (element, event) {
     this.element(element);
  },
      onkeyup: function (element, event) {
     if (event.which === 9 && this.elementValue(element) === '') {
         return;
    } else if (element.name in this.submitted) {
    this.element(element);
    }
      },
      rules:
{
    FirstName: { required: true, minlength: 2, maxlength: 20 },
 ContactNumber: { required: true, minlength: 10, maxlength: 10 },
    ContactEmail: { required: true, AcceptEmail: true }
},
       messages: {
      FirstName: {
         required: "Please enter your first name",
        minlength: "Minimum 2 characters required",
            maxlength: "Maximum 20 characters allowed"
    },
        ContactNumber: {
         required: "Please enter your Contact Number",
         minlength: "Enter a 10 digit contact number",
           maxlength: "Enter a 10 digit contact number"
         },
              ContactEmail: {
             required: "Please enter your Email Address",
              AcceptEmail: "Please enter a valid email ID"
          }
       }
    });
 var Provider = {
       SpecializationArray: ko.observableArray(Specialities),
        ProviderID: ko.observable(Edit_data.ProviderID),
        FirstName: ko.observable(Edit_data.FirstName),
      ContactNumber: ko.observable(Edit_data.ContactNumber),
    ContactEmail: ko.observable(Edit_data.ContactEmail)
  }
    ko.applyBindings(Provider);
  });

我的脚本将被加载到MVC的Shared文件夹的_Layout页面中。

   <head>
     <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />

     <link rel="stylesheet" href="../../Content/bootstrap-theme.min.css" />
     <link rel="stylesheet" href="../../Content/bootstrap.min.css" />

     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")


      <script type="text/javascript" src="../../Scripts/jquery-2.1.3.min.js">  </script>
          <script type="text/javascript" src="../../Scripts/jquery-ui-1.11.2.min.js"></script>
     <script type="text/javascript" src="../../Scripts/bootstrap.min.js"></script>
     <script type="text/javascript" src="../../Scripts/jquery.unobtrusive-ajax.min.js"></script>
         <script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
         <script type="text/javascript" src="../../Scripts/knockout-3.2.0.js"></script>
        </head>

我在这里不知所措。请指导我正确的方向。控制台中没有错误。

Answer 1

遗憾的是，您错过了其中一个基础知识 - jQuery Validate要求每个输入都具有name属性。只需将所有id属性复制到name，您的代码即可生效。

这在库的wiki中有所描述。同样在documentation：

对于输入元素，name属性是''''''' 没有它，验证插件不起作用。通常是姓名和身份证属性应具有相同的值。

Jquery插件未验证表单

1 个答案: