JQuery验证asp.net页面上的html输入答案

【问题标题】：JQuery validate on html input on asp.net pageJQuery验证asp.net页面上的html输入
【发布时间】：2012-11-05 02:23:06
【问题描述】：

我正在使用 Twitter 引导程序和 asp.net 构建一个网页来捕获用户信息。我正在使用此资源作为参考... http://alittlecode.com/files/jQuery-Validate-Demo/

我有一个母版页，我在其中定义了一个表单

<form id="form1" class="form-horizontal" runat="server">

并包含对 JQuery 的引用...

 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
 <script src="js/jquery.validate.min.js" type="text/javascript"></script>

在我的网页上，我有一个输入控件

<div class="control-group">
                <label class="control-label" for="name">
                    Your Name</label>
                <div class="controls">
                    <input type="text" class="input-xlarge" id="txtApplicantName" name="txtApplicantName" placeholder="First Name and Last Name"
                        runat="server">
                </div>
            </div>

资源有一些 JQuery 代码来验证我无法工作的表单字段...

$(document).ready(function(){

 $('#contact-form').validate(
 {
  rules: {
    name: {
      minlength: 2,
      required: true
    },
    email: {
      required: true,
      email: true
    },
    subject: {
      minlength: 2,
      required: true
    },
    message: {
      minlength: 2,
      required: true
    }
  },
  highlight: function(label) {
    $(label).closest('.control-group').addClass('error');
  },
  success: function(label) {
    label
      .text('OK!').addClass('valid')
      .closest('.control-group').addClass('success');
  }
 });
}); // end document.ready

我已将 $('#contact-form').validate 更改为 $('#form1').validate 但它似乎不起作用，我做错了什么？

【问题讨论】：

标签： jquery asp.net twitter-bootstrap

【解决方案1】：

<input type="text" class="input-xlarge" id="txtApplicantName" name="txtApplicantName">

由于您输入的名称属性是“txtApplicantName”，因此您应该有类似的规则

rules: {
  txtApplicantName: {
    minlength: 2,
    required: true
  }
}

更新：检查你的 html 中的表单元素，我刚刚做了一些实验，似乎表单需要有一个“动作”属性。

【讨论】：

我刚刚将字段更改为 txtApplicantName ，仍然无法正常工作。

【解决方案2】：

$("#form1").validate(); 错了，应该是$("#<%= form1.ClientID %>").validate();

或者，如果您愿意，您可以保留代码不变，只需将此属性添加到您的表单标签

ClientIDMode="Static"

【讨论】：

【解决方案3】：

规则的名称适用于文本框的类先试试这个：

    $(document).ready(function () {
        $("#form1").validate();
        jQuery.validator.messages.required = "*";
        jQuery.validator.messages.email = "Invalid Email"; //set any error message
    });

然后这个在 HTML 中

<input type="text" class="input-xlarge required" id="txtApplicantName" name="txtApplicantName" placeholder="First Name and Last Name"  runat="server">

一旦你得到验证工作，你可以弄乱每个规则

编辑：

现在对于表单上的其他输入，例如可能是这样的电子邮件地址输入，因为它有一个电子邮件类别，它会自动验证电子邮件地址。

<input type="text" class="input-xlarge email" id="txtEmail" name="txtEmail" placeholder="Email Address" runat="server">

现在，如果您想要一个自定义规则 - 在您的示例中它看起来并不像您需要的那样，但无论如何您都是这样做的

$("#myinput").rules("add", {
 required: true,
 minlength: 2,    // chage to any number you want min-length
 messages: {
   required: "Required input",     
   minlength: jQuery.format("Please, at least {0} characters are necessary")
 }
});

如果您愿意，您可以将更多选项添加到自定义规则中，请查看文档，但这就是它的外观

【讨论】：