jQuery Validate在MVC C＃中不起作用

Question

我正在使用MVC应用程序，需要检查是否已注册用户，为此，我创建了一个模型

public class Ejemplo
 {
   [Required(ErrorMessage="Favor especificar Username")]
   [DataType(DataType.Text)]
   public string usuario { get; set; }

   [Required(ErrorMessage="Favor especificar password")]
   [DataType(DataType.Password)]
   public string password { get; set; }
 }

到目前为止，我的问题是我需要通过AJAX以JSON格式发送用户信息，并且我需要验证是否指定了用户名和密码信息，以完成此代码的编写：

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {

        $('#myform').validate({ // initialize the plugin
            rules: {
                usuario: {
                    required: true,
                    minlength: 12
                },
                password: { required: true }
            },
            messages: {
                usuario: {
                    required: "must specify username --> validate !!!",
                    minlength: "not a valid Lenght --> validate !!!"
                },
                password: {
                    required: "must specify a password --> validate !!!"
                }
            },
             submitHandler:
                    $("#myform").on('submit', function () {
                        alert("have just pressed submit");
                        if ($("#myform").valid()) {
                            alert("here some code inside $.AJAX({})");
                        }
                        return false;
                    })
        })
    });

这是我的表格（上面的代码和表格在同一个文件中：Index.cshtml）

<fieldset>
 <legend> Validaciones MVC </legend>
  @using (Html.BeginForm("Prueba", "Prueba", FormMethod.Post, new { @id = "myform" }))
  {

     @Html.LabelFor(M => M.usuario);
     <br />
     @Html.EditorFor(M=>M.usuario)
     @Html.ValidationMessageFor(M => M.usuario);
     <br />
     @Html.LabelFor(M=>M.password)
     <br />
     @Html.EditorFor(M=>M.password);
     @Html.ValidationMessageFor(M=>M.password)
     <br />
     <br />

  <input type="submit" id="boton_id" name="boton_name" value="Enviar" />
                }
        </fieldset>

但如果用户名和密码为空，它不会验证并且不显示任何消息，它只会显示以下警报：alert（“刚刚按下了提交”）; 但永远不会显示第二个警报：alert（“此处是$ .AJAX（{}）中的一些代码”）; 这两个警报在

submitHandler:
                    $("#myform").on('submit', function () {
                        alert("have just pressed submit");
                        if ($("#myform").valid()) {
                            alert("here some code inside $.AJAX({})");
                        }
                        return false;
                    })

因此，能否请您帮助我，告诉我我的问题在哪里或我想念的是什么？

Answer 1

首先，您用于调用validate的JavaScript在语法上是错误的。 您需要将submitHandler代码包装在一个函数中：

submitHandler: function () { .... }

接下来， submitHandler时候已经叫submit被触发事件（当表单有效）。 您不需要绑定其他事件处理程序，也不需要检查表单在submitHandler内部是否有效。

根据文档 ：

表单有效时用于处理实际提交的回调。 获取表单作为唯一参数。 替换默认的提交。 验证后通过Ajax提交表单的正确位置。

以下内容就足够了：

submitHandler: function () {
    // Submit the form via AJAX.
}

Answer 2

我想添加与@AndrewWhitaker评论相关的补充信息：

嗯，您可以尝试删除无干扰的验证。 这可能会引起冲突。

这确实是一个问题，因为jquery.validate.unobtrusive.js在内部创建了验证器并将其与表单关联。 接下来，当您的以下代码被调用时：

$(document).ready(function () {
    $('#myform').validate({ // initialize the plugin

jquery.validate.js实际执行的操作如下：

validate: function( options ) {
    ...
    // check if a validator for this form was already created
    var validator = $.data(this[0], 'validator');
    if ( validator ) {
        return validator;
    }

如您所见，它只是检查与表单关联的验证器。 如果是，则仅返回它（在这种情况下，您的初始化设置无关紧要）。

您可以在此处执行的操作（而不是删除jquery.validate.unobtrusive.js，除非您不需要它）是直接访问和更改验证器设置，例如

var validator = $('#myForm').validate();
validator.settings.submitHandler = function(form) { ...
// etc.