【问题标题】:jQuery validation custom method didn't workjQuery 验证自定义方法不起作用
【发布时间】:2009-07-23 00:40:29
【问题描述】:

我在 jQuery 验证器上添加了这样的方法

    $.validator.addMethod(
        'myEqual', 
        function (value, element) {
            return value == element.value; // this one here didn't work
        }, 
        'Please enter a greater year!'
    );

    $.metadata.setType("attr", "validate");

    $("#educationForm").validate({
        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
        },
        errorPlacement: function(error, element) {
            error.appendTo( element.parent("td").next("td") );
        },
        /*success: function(label) {
            label.text("ok!").addClass("success");
        },*/
        rules: {
            txt_end: {
                required: true,
                myEqual: "#txt_begin"
            }
        },
        submitHandler: function() {}
    });

表格是这样的

<div id="wrapper_form">
    <form id="educationForm" name="educationForm" method="post" action="">
    <table width="500" border="0">
      <tr>
        <td width="100">Period:</td>
        <td width="200"><input type="text" name="txt_begin" id="txt_begin" size="8" maxlength="4" class="required year ui-widget-content ui-corner-all" />&nbsp;to&nbsp;
        <input type="text" name="txt_end" id="txt_end" size="8" maxlength="4" class="required year ui-widget-content ui-corner-all" /></td>
        <td width="200"></td>
      </tr>
      <tr>
        <td colspan="2">
        <input type="submit" name="btn_submit" id="btn_submit" value="Submit" class="ui-button ui-state-default ui-corner-all" />
        <input type="button" name="btn_cancel" id="btn_cancel" value="Cancel" class="ui-button ui-state-default ui-corner-all" />
        </td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </form>
</div>

但是为什么我添加的自定义方法不起作用?

return value == element.value; // this one here didn't work

对于任何值,它总是返回 true 我在这里错过了什么吗? 我没有使用内置方法,因为稍后在表单中我需要编写另一个方法来检查大于或等于和小于或等于( ">=" 和 "=”或“

【问题讨论】:

    标签: javascript jquery validation


    【解决方案1】:

    阅读您的代码,我看到使用您的自定义方法,您正在尝试比较两个文本输入,您正在将一个参数传递给您的验证器:myEqual: "#txt_begin"

    为此,您必须处理addMethod的回调函数的第三个参数:

    $.validator.addMethod('myEqual', function (value, element, param){// param will
        return value == $(param).val();                               // have  
    }, 'Message');                                                    // "#txt_begin"
    

    【讨论】:

    • 我试过了,还是不行 我检查了参数内容是“txt_begin”,而 $(param).value 内容是“未定义”:顺便说一句,我使用的是 Firefox 3.5 .1 这个浏览器有问题吗?没有用其他浏览器检查过
    • 抱歉,我的代码有错字,你可以在这里查看一个工作示例:jsbin.com/ecoko
    【解决方案2】:

    为什么不使用 Validate 插件提供的 'equalTo' 方法?

    rules {
       txt_begin : 'required' , 
       txt_end: { equalTo: '#txt_begin' }
    }
    

    您不必为 txt_end 输入 required 因为它必须等于 txt_begin 并且 txt_begin 是必填字段。

    【讨论】:

    • 非常感谢,我已经编辑了这个问题,以解决我面临的更具描述性的问题。很抱歉没有直接:)
    • 没关系。如果您不想使用 equalTo,请使用 CMS 的方法来使您的自定义规则生效。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-06
    • 1970-01-01
    • 1970-01-01
    • 2017-03-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多