Jquery 验证在 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("have just pressed submit");但从不显示第二个警报： alert("here some code inside $.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 () { .... }

接下来，当 submit 事件被触发时（以及表单有效时），submitHandler 已经被调用。您不需要绑定另一个事件处理程序或检查表单在 submitHandler.

中是否有效

根据 documentation:

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

以下应该足够了：

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

Answer 2

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

Hmm, you could try removing unobtrusive validation . It could be causing conflicts.

这确实是个问题，因为 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.

Jquery 验证在 MVC C# 中不起作用

Jquery Validate doesn't work in MVC C#

ajax

asp.net-mvc

jquery

jquery-validate

unobtrusive-validation