jQuery Validate（）和Valid（）方法未定义或不起作用

Question

我在MVC4项目中使用jQuery验证和必要的javascript文件（ jquery-1.9.1.js ， jquery.validate.min.js 和 jquery.validate.unobtrusive.min.js ）和配置。我想要做的是在提交表单之前验证表单。如果表单有效，将调用一个方法然后将其提交。如果没有，它将不会被提交，只会显示一个警报。我已经按照Call JQuery Validate Plugin without submitting the form上的步骤和许多类似的主题，特别是在jQuery官方页面上。但不知何故，当执行Validate（）和Valid（）方法时，我遇到了像undefined这样的错误。我认为这个问题与Validate（）方法有关。我尝试过不同类型的jquery-1.x.x.js文件，但结果是一样的。如何使用与下面方法类似的方法验证表单？还是其他什么？

script type="text/javascript">
$(function () {
        $("#submitbtn").click(function () {
            var form = $("#myForm");
            form.validate();
            var isValid = form.valid();

            if (isValid) { //If there is no validation error
                alert('form is valid - not submitted');
            } 
            else {
                alert('form is not valid');                               
        }
    });
});

Answer 1

我发现代码工作得很好但是元素的ID不是“myForm”，你是否尝试过确保使用表单的ClientID属性而不是ID？

$(function () {
    $("#submitbtn").click(function () {
        var form = $('#<%# myForm.ClientID %>');
        form.validate();
        var isValid = form.valid();
        if (isValid) { //If there is no validation error
            alert('form is valid - not submitted');
        } 
        else {
            alert('form is not valid');                               
        }
    });
});

我相信$("#myForm")没有像你期望的那样返回元素（例如，由于myForm不存在，它返回null或未定义）因此form.validate（）将不存在。

Answer 2

您收到的确切错误消息是什么？也许你没有正确引用jquery。 尝试执行简单的jquery调用，例如alert($("#myInput").val());

Answer 3

非常感谢大家。最后，我设法将验证方法与发布在http://blog.tkglaser.net/2012/02/waiting-spinner-for-long-running-form.html

上的微调器示例结合起来

查看：

<style type="text/css">
#loading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    z-index: 1000;
}

#loadingcontent {
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#loadingspinner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding-top: 80px;
}
</style>


$(function () {        
    //Waiting spinner for long-running form submits using jQuery
    $("#submitbtn").click(function () {

        var form = $("#addForm");
        form.validate();

        if (form.valid()) {
            $("#loading").fadeIn();
            var opts = {
                lines: 12, // The number of lines to draw
                length: 7, // The length of each line
                width: 4, // The line thickness
                radius: 10, // The radius of the inner circle
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false // Whether to use hardware acceleration
            };
            var target = document.getElementById('loading');
            var spinner = new Spinner(opts).spin(target);
        }
    });
});


<div id="loading">
    <div id="loadingcontent">
        <p id="loadingspinner">
            Waiting...
        </p>
    </div>
</div>