使用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 。 它具有相同的最終結果，並且在實際場景中肯定會更有意義。