Bootstrap/jQuery form Validation with ASP.NET - 非常基本的功能

Bootstrap/jQuery form Validation with ASP.NET - Very Basic Functionality

本文关键字：非常 功能 NET ASP jQuery form Validation with Bootstrap      更新时间：2023-09-26

我是一个经验丰富的.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 功能正在被达到，并且是有效的结束为真。

看起来很简单，我无法完全弄清楚我错过了什么。可能是非常简单的事情。

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

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

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

相关文章：