3

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

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');                               
        }
    });
});

4

3 回答 3

3

我发现代码运行良好，但是元素的 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")没有像您预期的那样返回元素（例如，它返回 null 或 undefined，因为 myForm 不存在）因此 form.validate() 将不存在。

于 2013-10-28T13:34:32.433 回答
0

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

于 2013-10-29T00:59:58.830 回答
0

非常感谢大家。最后，我设法将验证方法与发布在以下位置的微调器示例相结合：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>
于 2015-01-11T19:17:05.843 回答