尝试让内联 validate[funcCall] 重新确定我的函数

发布于 2024-11-01 15:37:50 字数 2999 浏览 4 评论 0原文

我在这里关注这个问题太久了。我试图在 2 个字段上使用两组验证(两个日期,验证都发生在 blur 上,这是验证引擎的默认事件)。

第一组验证始终发生并验证用户是否具有有效的输入日期。

仅当两个字段都有正确的日期时才会进行第二组验证。它执行检查以验证两组日期是否具有要搜索的有效日期范围。

但这是我目前在自动提款机上遇到问题的第二次。由于某种原因,我的 FuncCalls 未被识别。我已经查看了文档和源代码,但我仍然不确定执行此操作的正确方法到底是什么,或者就处理相互依赖的字段而言,是否有更好的方法来处理这个问题。

<html>
    <head>
        <script src="../../inc/functions.js" type="text/javascript"></script>
        <script src="../../inc/jquery-min.js" type="text/javascript"></script>
        <script src="../../inc/jquery.validationEngine.js" type="text/javascript"></script>
        <script src="../../inc/jquery.validationEngine-en.js" type="text/javascript"></script>
        <link href="../../inc/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">

        //returns true if end is later than start
            function dateCompare(start, end) {
                if (isDate(start) && isDate(end)) {
                    return (new Date(start.toString()) < new Date(end.toString()))
                }
            }

            $(document).ready(function () {
                $("#arbitraryForm").validationEngine('attach');

                function rangeCheck(field, rules, i, options) {
                    alert("rangeCheck caLLEd");
                    var inDate1 = $("#inDate1").val();
                    var inDate2 = $("#inDate2").val();

                    if (!dateCompare(inDate1, inDate2)) {
                        return "arbitarty error";
                    }
                }

                $("#inDate1").blur(function (e) {
                    var inDate1 = PadDate($("#inDate1").val());
                    var inDate2 = PadDate($("#inDate2").val());
                    if (isDate(inDate1)) {
                        document.getElementById("inDate1").value = inDate1;
                        if (isDate(inDate2)) {
                            if (dateCompare(inDate1, inDate2)) {

                            }
                        }
                    }
                }),

                $("#inDate2").blur(function (e) {

                    var inDate2 = PadDate($("#inDate2").val());
                    if (isDate(inDate2)) {
                        document.getElementById("inDate2").value = inDate2;
                    }
                })
            });
        </script>
    </head>
    <form id="arbitraryForm" action="whatever_page.html">
        <div>
            <input type="text" id="inDate1" name="inDate1"  value="" class="validate[required,custom[dateFormat],funcCall[rangeCheck]]" /> 
            <input type="text" id="inDate2" name="inDate1"  value="" class="validate[required,custom[dateFormat],funcCall[rangeCheck]]" /> 
        </div>
            <input id="subbtn" type="submit" value="Run Report" name="subbtn"/>
    </form>
</html>

I been looking at this for far too long here. I'm trying to use two sets of validation on 2 fields (both dates, validation happens onblur, the default event for the validation engine).

The first set of validation happens all the time and verifies that the user has valid input dates.

The second set of validation happens only when both fields have correct dates. it preforms a check to verify both sets of dates have a valid date range to search for.

But its the second that I am currently having a problem with atm. My FuncCalls aren't being recognized for some reason. I've looked at the documentation and the source but I am still not sure what exactly is the proper way of doing this or, for that matter ,in terms of dealing with interdependent fields, if there is a better way of handling this.

<html>
    <head>
        <script src="../../inc/functions.js" type="text/javascript"></script>
        <script src="../../inc/jquery-min.js" type="text/javascript"></script>
        <script src="../../inc/jquery.validationEngine.js" type="text/javascript"></script>
        <script src="../../inc/jquery.validationEngine-en.js" type="text/javascript"></script>
        <link href="../../inc/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">

        //returns true if end is later than start
            function dateCompare(start, end) {
                if (isDate(start) && isDate(end)) {
                    return (new Date(start.toString()) < new Date(end.toString()))
                }
            }

            $(document).ready(function () {
                $("#arbitraryForm").validationEngine('attach');

                function rangeCheck(field, rules, i, options) {
                    alert("rangeCheck caLLEd");
                    var inDate1 = $("#inDate1").val();
                    var inDate2 = $("#inDate2").val();

                    if (!dateCompare(inDate1, inDate2)) {
                        return "arbitarty error";
                    }
                }

                $("#inDate1").blur(function (e) {
                    var inDate1 = PadDate($("#inDate1").val());
                    var inDate2 = PadDate($("#inDate2").val());
                    if (isDate(inDate1)) {
                        document.getElementById("inDate1").value = inDate1;
                        if (isDate(inDate2)) {
                            if (dateCompare(inDate1, inDate2)) {

                            }
                        }
                    }
                }),

                $("#inDate2").blur(function (e) {

                    var inDate2 = PadDate($("#inDate2").val());
                    if (isDate(inDate2)) {
                        document.getElementById("inDate2").value = inDate2;
                    }
                })
            });
        </script>
    </head>
    <form id="arbitraryForm" action="whatever_page.html">
        <div>
            <input type="text" id="inDate1" name="inDate1"  value="" class="validate[required,custom[dateFormat],funcCall[rangeCheck]]" /> 
            <input type="text" id="inDate2" name="inDate1"  value="" class="validate[required,custom[dateFormat],funcCall[rangeCheck]]" /> 
        </div>
            <input id="subbtn" type="submit" value="Run Report" name="subbtn"/>
    </form>
</html>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

美人如玉 2024-11-08 15:37:50

我认为你增加了你并不真正需要的复杂性(这似乎在 jQuery 中经常发生)。为什么不直接使用这样的内容:

        function rangeCheck() {
            alert("rangeCheck caLLEd");
            var inDate1 = $("#inDate1").val();
            var inDate2 = $("#inDate2").val();

            if (!dateCompare(inDate1, inDate2)) {
                //flag the error in the form here, if you want
                return false;
            }
            return true;
        }

        function blur1() {
            var inDate1 = PadDate($("#inDate1").val());
            var inDate2 = PadDate($("#inDate2").val());
            if (isDate(inDate1)) {
                document.getElementById("inDate1").value = inDate1;
                if (isDate(inDate2)) {
                    if (dateCompare(inDate1, inDate2)) {

                    }
                }
            }
        }

        function blur2() {
            var inDate2 = PadDate($("#inDate2").val());
            if (isDate(inDate2)) {
                document.getElementById("inDate2").value = inDate2;
            }
        }

<form id="arbitraryForm" action="whatever_page.html" onSubmit="return rangeCheck();">
    <div>
        <input type="text" id="inDate1" name="inDate1"  value="" onBlur="blur1();" /> 
        <input type="text" id="inDate2" name="inDate1"  value="" onBlur="blur2();" /> 
    </div>
        <input id="subbtn" type="submit" value="Run Report" name="subbtn"/>
</form>

...它更短,并且更清楚地说明它在做什么。

此外,无需在 document.ready 块内定义命名函数(在本例中为 rangeCheck())。如果您愿意的话可以,但是如果您这样做,您可能希望将其显式分配到全局范围中,如下所示:

        window.rangeCheck = function(field, rules, i, options) {
            alert("rangeCheck caLLEd");
            var inDate1 = $("#inDate1").val();
            var inDate2 = $("#inDate2").val();

            if (!dateCompare(inDate1, inDate2)) {
                return "arbitarty error";
            }
        };

I think you are adding complexity you don't really need (this seems to happen a lot with jQuery). Why not just use something like:

        function rangeCheck() {
            alert("rangeCheck caLLEd");
            var inDate1 = $("#inDate1").val();
            var inDate2 = $("#inDate2").val();

            if (!dateCompare(inDate1, inDate2)) {
                //flag the error in the form here, if you want
                return false;
            }
            return true;
        }

        function blur1() {
            var inDate1 = PadDate($("#inDate1").val());
            var inDate2 = PadDate($("#inDate2").val());
            if (isDate(inDate1)) {
                document.getElementById("inDate1").value = inDate1;
                if (isDate(inDate2)) {
                    if (dateCompare(inDate1, inDate2)) {

                    }
                }
            }
        }

        function blur2() {
            var inDate2 = PadDate($("#inDate2").val());
            if (isDate(inDate2)) {
                document.getElementById("inDate2").value = inDate2;
            }
        }

<form id="arbitraryForm" action="whatever_page.html" onSubmit="return rangeCheck();">
    <div>
        <input type="text" id="inDate1" name="inDate1"  value="" onBlur="blur1();" /> 
        <input type="text" id="inDate2" name="inDate1"  value="" onBlur="blur2();" /> 
    </div>
        <input id="subbtn" type="submit" value="Run Report" name="subbtn"/>
</form>

...it's shorter, and more clear in what it is doing.

Also, there's no need to define your named function (rangeCheck() in this case) inside of the document.ready block. You can if you want, but if you do so you may want to explicitly assign it into the global scope, like so:

        window.rangeCheck = function(field, rules, i, options) {
            alert("rangeCheck caLLEd");
            var inDate1 = $("#inDate1").val();
            var inDate2 = $("#inDate2").val();

            if (!dateCompare(inDate1, inDate2)) {
                return "arbitarty error";
            }
        };
一片旧的回忆 2024-11-08 15:37:50

rangeCheck 函数移到 $(document).ready 包装器之外(例如直接在 dateCompare 函数下面)。

如果您在 $(document).ready 方法中声明它,则会将其范围限制为该方法。

Move your rangeCheck function outside the $(document).ready wrapper (directly underneath the dateCompare function for example).

If you declare it within the $(document).ready method you're limiting its scope to that method.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文