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结束为真。

看起来挺直截了当，我无法理解我所缺少的东西。可能非常简单。

Answer 1

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

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

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

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

1 个答案: