MVC.net JQuery验证

Question

在尝试避免使用JavaScript多年之后,Iv开始在MVC asp.net中使用JQuery进行验证,因为似乎没有正式的验证方法,我很惊讶JQuery有多好.

首先是有一种方法让intellisense为JQuery及其验证插件工作,这样我就不必学习api了吗？

其次,我如何为此创建验证摘要,它当前将错误附加到文本框的右侧:

<script type="text/javascript">
$().ready(function() {
$("#CreateLog").validate({
        rules: {            
            UserName: {
                required: true,
                minLength: 2,

            }
        },
        messages: {

            UserName: {
                required: "Please enter a username",
                minLength: "Your username must consist of at least 2 characters",

            }
        }
    });
});
</script>

<form id="CreateLog" action="Create" method="post" />   
        <label>UserName</label><br />
        <%=Html.TextBox("UserName")%> 
         <br />  
          <div class="error"> </div>
        <input  type=submit value=Save />
       </form>

我尝试将其添加到脚本中:

 errorLabelContainer: $("#CreateLog div.error")

这到html:

  <div class="error"> </div>

但这没效果.

Answer 1

尝试在选项中指定包装器和标签容器.我还添加了display:none; 使用错误容器的样式让jquery决定何时显示它.

HTML:

$().ready(function() {
  $("#CreateLog").validate({
    errorLabelContainer: $("ul", $('div.error-container')),
    wrapper: 'li',
    rules: {            
        UserName: {
            required: true,
            minLength: 2,

        }
    },
    messages: {
      UserName: {
        required: "Please enter a username",
        minLength: "Your username must consist of at least 2 characters"
      }
    }
  });
});

脚本:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="error-container">
  <ul></ul>
</div>

<form id="CreateLog" action="Create" method="post" />   
  <label>UserName</label><br />
  <%=Html.TextBox("UserName")%> 
  <br />  
  <input  type=submit value=Save />
</form>

这应该工作.

Answer 2

您可能想要查看Karl Seguin在CodeBetter.com上的ASP.NET MVC验证方法及其示例应用程序画布.

验证 - 第1部分 - 入门

验证 - 第2部分 - 客户端

验证 - 第3部分 - 服务器端