试图获取内联验证[func Call]来识别我的功能

时间:2011-04-12 23:10:53

标签: javascript jquery html validation jquery-validation-engine

我在这里待了很长时间。我正在尝试在2个字段上使用两组验证(两个日期,验证发生在onblur,验证引擎的默认事件)。

第一组验证一直在进行,并验证用户是否有有效的输入日期。

第二组验证仅在两个字段都具有正确日期时发生。它会执行检查以验证两组日期都有一个有效的日期范围来搜索。

但它是我目前遇到atm问题的第二个问题。我的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>

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:2)

我认为你正在增加你并不真正需要的复杂性(这似乎在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>

......它更短,更明确的是它在做什么。

此外,无需在rangeCheck()块内定义您的命名函数(在本例中为document.ready)。您可以根据需要使用,但如果您这样做,您可能希望将其明确地分配到全局范围,如下所示:

        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";
            }
        };