使用ASP.NET进行Bootstrap / jQuery表单验证-非常基本的功能

Question

我是一位经验丰富的.NET开发人员，并且通过jQuery和Bootstrap实现了这一目标。 我正在尝试集成jQuery表单验证（jquery.validator.js插件），并且似乎无法掌握基础知识。 我觉得我正在做文档中指定的内容，以使基本示例正常工作，但显然我缺少了一些东西。

我的页面包括：

 <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="/Content/bootstrap-theme.min.css" rel="stylesheet" type="text/css" /> <link href="/Content/datepicker3.css" rel="stylesheet" type="text/css" /> <link href="/Content/site-style-main.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script> <script src="/Scripts/bootstrap.min.js" type="text/javascript"></script> <script src="/Scripts/bootstrap-datepicker.js" type="text/javascript"></script> <script src="https://www.google.com/recaptcha/api.js" type="text/javascript"></script> <script src="/Scripts/site-script-step1validate.js" type="text/javascript"></script> 

这是与要验证的字段之一有关的相关HTML格式：

 <form name="aspnetForm" method="post" action="Step1.aspx?RecertID=1" id="aspnetForm" class="form-horizontal" enctype="multipart/form-data" role="form"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon">First Name</span> <input name="ctl00$PageContent$RecertVFCFormView$ProviderFirstName" type="text" maxlength="256" id="ProviderFirstName" class="form-control" /> </div> </div> <a id="ExitButton" class="btn btn-primary btn-sm" href="javascript:__doPostBack(&#39;ctl00$PageContent$RecertVFCFormView$StepController$ExitButton&#39;,&#39;&#39;)"> <i class="glyphicon glyphicon-new-window" aria-hidden="true"></i> Exit </a> </form> 

这就是我的jQuery的样子（site-script-step1validate.js）：

 $(document).ready(function () { $('#ProviderMedLicenseExpiration').datepicker(); $('#aspnetForm').validate({ onsubmit: false, rules: { ProviderFirstName: { required: true } }, highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); } }); $('#ExitButton').click(function (e) { var isValid = $('#aspnetForm').valid(); if (!isValid) { e.preventDefault(); } }); }); 

在这一点上，我的期望是，如果没有填写该名字字段，该表单将无法提交。 它不是。 我知道我的ExitButton.click函数已到达，并且isValid结束为true。

看起来很简单，我无法完全弥补我所缺少的东西。 可能很简单。

Answer 1

问题在于ProviderFirstName规则必须与您要验证的输入控件的名称匹配。 如果检查HTML，您将看到名称为ctl00$PageContent$RecertVFCFormView$ProviderFirstName 。 因此，该规则只是被忽略了。

如果您使用的是asp.net 4+，可能的解决方案是将TextBox控件的ClientIDMode定义为static以避免.net引擎基于父容器更改ID。

另一个可能与您的培训目的背道而驰的选项是将required添加到TextBox标记中，并删除自定义规则ProviderFirstName 。 它具有相同的最终结果，并且在实际场景中肯定会更有意义。