JQuery验证:validator.elementValue不是函数

时间:2016-05-18 15:42:55

标签: jquery jquery-validate

我的表单中有两个字段,我希望其中一个字段被填充。我找到了JQuery validate插件,但require_from_group似乎无效。

检查中的控制台返回:

Uncaught TypeError: validator.elementValue is not a function

我做的第一件事就是将类附加到所需的字段grouprequired

现在我有JS文件;在我添加了short_descriptionlanguage_from验证后,text_to_translatefile验证工作正常。

你知道问题出在哪里吗?

$(function () {
    jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
    });

    $("#job_creation_form").validate({
        rules: {
            short_description: {
                required: true
            },
            language_from: {
                required: true
            },
            text_to_translate: {
                require_from_group: [1, '.grouprequired']
            },
            file: {
                require_from_group: [1, '.grouprequired']
            }
        },

        messages: {
            short_description: {
                required: "Short description can't be empty. Please fill this field."
            },
            language_from: {
                required: "Please choose current language."
            },
            text_to_translate: {
                require_from_group: "Either fill this form with a text or attach a file (below)."
            },
            file: {
                require_from_group: "Either attach a file or fill text to translate (above)."
            }
        }
    });
    $.validator.addMethod("require_from_group", function (value, element, options) {
        alert('kosd')
        var $fields = $(options[1], element.form),
            $fieldsFirst = $fields.eq(0),
            validator = $fieldsFirst.data("valid_req_grp") ? $fieldsFirst.data("valid_req_grp") : $.extend({}, this),
            isValid = $fields.filter(function () {
                    return validator.elementValue(this);
                }).length >= options[0];

        // Store the cloned validator for future validation
        $fieldsFirst.data("valid_req_grp", validator);

        // If element isn't being validated, run each require_from_group field's validation rules
        if (!$(element).data("being_validated")) {
            $fields.data("being_validated", true);
            $fields.each(function () {
                validator.element(this);
            });
            $fields.data("being_validated", false);
        }
        return isValid;
    }, $.validator.format("Please fill at least {0} of these fields."));
});

在控制台的红线之前,有这样的:

jquery.validate.min.js:29 exception occured when checking element id_text_to_translate, check the 'require_from_group' method TypeError: validator.elementValue is not a function(…)

编辑:这是表单的实际HTML:

<form id="job_creation_form" action="" method="post" enctype="multipart/form-data" novalidate="novalidate"><input
        type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">


    <div id="div_id_short_description" class="control-group"><label for="id_short_description"
                                                                    class="control-label requiredField">
        Short description<span class="asteriskField">*</span> </label>
        <div class="controls"><input class="textinput textInput" id="id_short_description" maxlength="40"
                                     name="short_description" type="text">
            <p id="hint_id_short_description" class="help-block">Very short description of this order</p></div>
    </div>
    <div id="div_id_language_from" class="control-group"><label for="id_language_from"
                                                                class="control-label requiredField">
        Language from<span class="asteriskField">*</span> </label>
        <div class="controls"><select class="select" id="id_language_from" name="language_from">
            <option value="" selected="selected">---------</option>
            <option value="45">Slovak</option>
            <option value="46">Russian</option>
            <option value="47">Magyar</option>
            <option value="48">English</option>
            <option value="49">Croatian</option>
            <option value="50">Spanish</option>
            <option value="51">Dutch</option>
            <option value="52">Estonian</option>
        </select></div>
    </div>
    <div id="div_id_text_to_translate" class="control-group"><label for="id_text_to_translate" class="control-label ">
        Text to translate
    </label>
        <div class="controls"><textarea class="grouprequired textarea" cols="40" id="id_text_to_translate"
                                        name="text_to_translate" placeholder="Specification" rows="10"></textarea></div>
    </div>
    <div id="div_id_file" class="control-group"><label for="id_file" class="control-label ">
        File
    </label>
        <div class="controls"><input class="grouprequired clearablefileinput" id="id_file" name="file" type="file">
        </div>
    </div>
    <div id="div_id_notes" class="control-group"><label for="id_notes" class="control-label requiredField">
        Notes<span class="asteriskField">*</span> </label>
        <div class="controls"><textarea class="textarea" cols="40" id="id_notes" name="notes" rows="10"></textarea>
            <p id="hint_id_notes" class="help-block">Notes</p></div>
    </div>


    <input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="5"><input id="id_form-INITIAL_FORMS"
                                                                                           name="form-INITIAL_FORMS"
                                                                                           type="hidden"
                                                                                           value="0"><input
            id="id_form-MIN_NUM_FORMS" name="form-MIN_NUM_FORMS" type="hidden" value="0"><input
            id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="5">

    <input type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
    <label for="id_form-0-language">Language:</label><select class="select-language" id="id_form-0-language"
                                                             name="form-0-language">
        <option value="" selected="selected">---------</option>
        <option value="45">Slovak</option>
        <option value="46">Russian</option>
        <option value="47">Magyar</option>
        <option value="48">English</option>
        <option value="49">Croatian</option>
        <option value="50">Spanish</option>
        <option value="51">Dutch</option>
        <option value="52">Estonian</option>
    </select>
    <label for="id_form-0-level">Level:</label><select id="id_form-0-level" name="form-0-level">
        <option value="" selected="selected">---------</option>
        <option value="34">Unknown</option>
        <option value="35">Standard level</option>
        <option value="36">Professional level</option>
        <option value="37">Native speaker level</option>
    </select>
    <br>
    <br>

    <input type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
    <label for="id_form-1-language">Language:</label><select class="select-language" id="id_form-1-language"
                                                             name="form-1-language">
        <option value="" selected="selected">---------</option>
        <option value="45">Slovak</option>
        <option value="46">Russian</option>
        <option value="47">Magyar</option>
        <option value="48">English</option>
        <option value="49">Croatian</option>
        <option value="50">Spanish</option>
        <option value="51">Dutch</option>
        <option value="52">Estonian</option>
    </select>
    <label for="id_form-1-level">Level:</label><select id="id_form-1-level" name="form-1-level">
        <option value="" selected="selected">---------</option>
        <option value="34">Unknown</option>
        <option value="35">Standard level</option>
        <option value="36">Professional level</option>
        <option value="37">Native speaker level</option>
    </select>
    <br>
    <br>

    <input type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
    <label for="id_form-2-language">Language:</label><select class="select-language" id="id_form-2-language"
                                                             name="form-2-language">
        <option value="" selected="selected">---------</option>
        <option value="45">Slovak</option>
        <option value="46">Russian</option>
        <option value="47">Magyar</option>
        <option value="48">English</option>
        <option value="49">Croatian</option>
        <option value="50">Spanish</option>
        <option value="51">Dutch</option>
        <option value="52">Estonian</option>
    </select>
    <label for="id_form-2-level">Level:</label><select id="id_form-2-level" name="form-2-level">
        <option value="" selected="selected">---------</option>
        <option value="34">Unknown</option>
        <option value="35">Standard level</option>
        <option value="36">Professional level</option>
        <option value="37">Native speaker level</option>
    </select>
    <br>
    <br>

    <input type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
    <label for="id_form-3-language">Language:</label><select class="select-language" id="id_form-3-language"
                                                             name="form-3-language">
        <option value="" selected="selected">---------</option>
        <option value="45">Slovak</option>
        <option value="46">Russian</option>
        <option value="47">Magyar</option>
        <option value="48">English</option>
        <option value="49">Croatian</option>
        <option value="50">Spanish</option>
        <option value="51">Dutch</option>
        <option value="52">Estonian</option>
    </select>
    <label for="id_form-3-level">Level:</label><select id="id_form-3-level" name="form-3-level">
        <option value="" selected="selected">---------</option>
        <option value="34">Unknown</option>
        <option value="35">Standard level</option>
        <option value="36">Professional level</option>
        <option value="37">Native speaker level</option>
    </select>
    <br>
    <br>

    <input type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
    <label for="id_form-4-language">Language:</label><select class="select-language" id="id_form-4-language"
                                                             name="form-4-language">
        <option value="" selected="selected">---------</option>
        <option value="45">Slovak</option>
        <option value="46">Russian</option>
        <option value="47">Magyar</option>
        <option value="48">English</option>
        <option value="49">Croatian</option>
        <option value="50">Spanish</option>
        <option value="51">Dutch</option>
        <option value="52">Estonian</option>
    </select>
    <label for="id_form-4-level">Level:</label><select id="id_form-4-level" name="form-4-level">
        <option value="" selected="selected">---------</option>
        <option value="34">Unknown</option>
        <option value="35">Standard level</option>
        <option value="36">Professional level</option>
        <option value="37">Native speaker level</option>
    </select>
    <br>
    <br>

    <button value="Update" type="submit">Submit</button>
</form>

1 个答案:

答案 0 :(得分:1)

根据OP's comment

  

<script src="ajax.aspnetcdn.com/ajax/jquery.validate/1.9/…

因此,您正在使用jQuery Validate插件的1.9版,以及从插件的require_from_group文件的1.15版本中复制的additional-methods.js方法。自版本1.9起,require_from_group中的许多错误已得到修复,additional-methods.js中的方法版本需要与jQuery Validate版本匹配。

将jQuery Validate插件升级到版本1.15

src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"

否则,它在这里工作:http://jsfiddle.net/s40kwon6/