自定义验证不适用于 Ajax MVC 调用

发布于 2024-12-27 10:32:45 字数 473 浏览 5 评论 0原文

单击按钮时，如果同一页面（不是灯箱）中的另一个表单有效，我想提交一个表单。该验证是我创建的自定义验证并且工作正常。这是视图中的代码

$("#btnSave").click(function (e) {

            if ($("#GeneralButtonFrm").valid()) {

                $("#ButtonFrm").submit();

            } else {
                //Error Message
            } });

问题是提交操作正在执行，而没有等待返回 false 的自定义验证的响应。

知道为什么会发生这种情况吗？

注意：我说我没有使用 ligthbox 渲染部分，因为在这种情况下，解决方案将是 jQuery.validator.unobtrusive.parse('#form');

谢谢

原文

On the click of a button i want to sumbit a form if another form, in the same page (not a ligthbox) is valid. That validation is a Custom Validation I created and is working fine.
This is the code in the view

$("#btnSave").click(function (e) {

            if ($("#GeneralButtonFrm").valid()) {

                $("#ButtonFrm").submit();

            } else {
                //Error Message
            } });

The problem is that the submit action is executing without waiting for the response of the custom validation which return false.

Any idea why this is happening?

Note: I said I am not using a ligthbox rendering a partial becouse in that case the solution would be jQuery.validator.unobtrusive.parse('#form');

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷情妓 2025-01-03 10:32:45

你的问题还是很模糊。但我认为你想要的是调用 ajax 并进行服务器端验证。如果是这样，问题是您的验证将在 ajax 请求之前返回，因为 ajax 请求是异步的。

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
        <script type="text/javascript">
            jQuery.validator.addMethod("ajaxCustom", function (value, element) {
                var wrap = $(element);
                var url = wrap.data("customAjaxUrl");
                var result;

                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    success: function (data) {
                       result  = data.valid;
                    },
                    data: { value: value, id: element.id },
                    async: false
                });

                return this.optional(element) || result;

            }, "Ajax");

            $.validator.unobtrusive.adapters.addBool('ajaxCustom');
            </script>
        <style type="text/css">
            .input-validation-error {
                background: red;
            }

        </style>

    </head>
    <body>

        <form action="/">
            <input data-val-ajaxCustom="Tuckel" data-val="true" data-val-required="Its required" data-custom-ajax-url="validate.html" />
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

You are still very vague, in your question. But i think what you want is to call ajax and do a serverside validation. If so, the problem is that your validation will return before ajax request since the ajax request is async.. Do this

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
        <script type="text/javascript">
            jQuery.validator.addMethod("ajaxCustom", function (value, element) {
                var wrap = $(element);
                var url = wrap.data("customAjaxUrl");
                var result;

                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    success: function (data) {
                       result  = data.valid;
                    },
                    data: { value: value, id: element.id },
                    async: false
                });

                return this.optional(element) || result;

            }, "Ajax");

            $.validator.unobtrusive.adapters.addBool('ajaxCustom');
            </script>
        <style type="text/css">
            .input-validation-error {
                background: red;
            }

        </style>

    </head>
    <body>

        <form action="/">
            <input data-val-ajaxCustom="Tuckel" data-val="true" data-val-required="Its required" data-custom-ajax-url="validate.html" />
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

回复收藏 0 原文

~没有更多了~