Question

正如标题所说，我需要使用jQuery Validator插件验证2个相关的选择列表，以强制网站用户从所有2个字段中选择一个选项（它们必须成为必填字段）。如果您看到html，则可以在第二个列表中读取“禁用”标记，当用户选择list1选项之一时，该标记将被删除。这是简单的表格代码

<form action="/index.php" method="post" id="XTspSearchForm132" >
<select class='sid_list1' name='to_sid_list_1321' id='extparent_1321' style='margin-top:4px;'><option style="" value="" selected="selected">- Seleziona categoria -</option><option style="" value="spc55" class="spc63" >Africa del Sud</option><option style="" value="spc56" class="spc63" >Nord America e Caraibi</option><option style="" value="spc57" class="spc63" >America Centrale</option><option style="" value="spc58" class="spc63" >Sud America</option><option style="" value="spc59" class="spc63" >Isole del Pacifico</option><option style="" value="spc60" class="spc63" >Oceano Indiano</option><option style="" value="spc61" class="spc63" >Penisola Arabica</option></select>
<select class='sid_list2' name='to_sid_list_1322' id='extparent_1322' style='margin-top:4px;'><option style="" value="" selected="selected" disabled="disabled">- Seleziona categoria -</option><option style="" value="spc62" class="spc55" >Botswana</option><option style="" value="spc64" class="spc55" >Mauritius e Seychelles</option><option style="" value="spc65" class="spc55" >Mozambico</option><option style="" value="spc66" class="spc55" >Namibia</option><option style="" value="spc67" class="spc55" >Zimbabwe e Zambia</option><option style="" value="spc68" class="spc55" >Sudafrica</option><option style="" value="spc69" class="spc56" >Anguilla</option><option style="" value="spc70" class="spc56" >Antigua e Barbados</option><option style="" value="spc71" class="spc56" >Aruba</option><option style="" value="spc72" class="spc56" >Bahamas</option><option style="" value="spc73" class="spc56" >Bermuda</option><option style="" value="spc74" class="spc56" >Giamaica</option><option style="" value="spc75" class="spc56" >Repubblica Dominicana</option><option style="" value="spc76" class="spc56" >St Lucia</option><option style="" value="spc77" class="spc56" >St Martin</option><option style="" value="spc78" class="spc56" >Turks and Caicos</option><option style="" value="spc79" class="spc56" >US &amp; British Virgin Islands</option><option style="" value="spc80" class="spc56" >Canada</option><option style="" value="spc81" class="spc56" >Canouan Island</option><option style="" value="spc82" class="spc56" >Stati Uniti</option><option style="" value="spc83" class="spc57" >Belize</option><option style="" value="spc84" class="spc57" >Costa Rica</option><option style="" value="spc85" class="spc57" >Guatemala</option><option style="" value="spc86" class="spc57" >Messico</option><option style="" value="spc87" class="spc57" >Panama</option><option style="" value="spc88" class="spc58" >Equador</option><option style="" value="spc89" class="spc58" >Perù</option><option style="" value="spc90" class="spc59" >Hawaii</option><option style="" value="spc91" class="spc59" >Polinesia Francese</option><option style="" value="spc92" class="spc60" >Seishelles</option><option style="" value="spc93" class="spc60" >Mauritius</option><option style="" value="spc94" class="spc61" >Dubai</option><option style="" value="spc95" class="spc61" >Oman</option></select>
<input type="submit" id="XTtop_button" name="search" value="Search" class="buttonhome" onclick="this.form.sp_search_for.focus();extSearchHelper132.extractFormValues();"/>
</form>

删除“禁用”标记可能取决于此脚本，由以下格式加载：http://www.provafabio.netsons.org/modules/mod_sobiextsearch/js/jquery.chained.min.js

现在我正在使用这个脚本，它适用于第一个，但不适用于第二个......

<script text= type='text/javascript'> 
var $j = jQuery.noConflict();
$j(document).ready(function () {

    $j("#XTspSearchForm132").validate({
        // other rules and options,
    });

    $j('.sid_list1').each(function () {
        $j(this).rules('add', {
            required: true,
            messages: {
                required: "your custom message"
            }
        });
    });

    $j('.sid_list2').each(function () {
        $j(this).rules('add', {
            required: true,
            messages: {
                required: "your custom message"
            }
        });
    });


});
</script>

我需要找到激活第二个列表的动作语法，以实现一个像这样工作的脚本jsfiddle.net/km6XE/（抱歉，不能发布更多的一个链接）

以下是行动表格：provafabio.netsons.org

Answer 1

我认为问题在于您的示例中的“其他规则和选项”部分未包含在内，因为您的表单或JavaScript代码没有任何问题

当您为不存在的方法指定规则时，经常会遇到您描述的错误 - have a look at this fiddle for an example

例如。这将为您提供您所看到的错误

$('#myform').validate({
        rules: {
            field1: {
                non_existent_method: true
            }
        }
});

Answer 2

如果rules('add')元素尚不存在，则不要在DOM就绪中使用input。

此答案显示，当用户点击一次按钮时，会向newfield添加名为form的新字段，然后将rules are added dynamically添加到此新input字段。

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                minlength: 5
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

    $('button#add').one('click', function () {
        var field = '<input type="text" name="newfield" /><br />';
        $('#myform').prepend(field);
        $('[name="newfield"]').rules("add", {
            required: true,
            messages: {
                required: "this new field is now required"
            }
        });
    });

});

演示：http://jsfiddle.net/km6XE/

您需要确保代码为每个新name创建唯一 input，否则您将破坏验证插件。

Answer 3

引用OP：“我需要理解：1）我如何向第一堂课添加规则不使用'添加'功能2）如何添加规则到选择列表在DOM“
中不存在

请参阅以下内容：

“1）如何在不使用”添加“功能”
的情况下向第一个类添加规则

如果您想使用class一次将这些规则分配给多个元素，则可以使用rules('add')。如果您按name添加规则，还有其他方法。同样，由于您要按class进行定位，因此可以使用rules('add')。

“2）如何将规则添加到DOM”
中不存在的选择列表中

您无法将规则添加到DOM中尚不存在的内容中。

在用于创建元素的任何函数中，您可以放置rules('add')。

这只是一个例子：

IF 您使用按钮添加输入元素，您将rules('add')放在click处理函数中。无论您如何添加新的input，相同的想法都适用。由于我们无法看到您的代码部分，因此我坚持使用下面的通用示例：

$('button#add').one('click', function () { // <-- WHATEVER FUNCTION YOU USE to add the new input

    // THIS is just SAMPLE code that adds a new input element
    var field = '<input type="text" name="newfield" /><br />';
    $('#myform').prepend(field);

    // NOW HERE, AFTER the new input is created, is where to add the rules.
    $('[name="newfield"]').rules("add", {
        required: true,
        messages: {
            required: "this new field is now required"
        }
    });

});  // <- end button#add click handler

工作演示：http://jsfiddle.net/km6XE/

基本上这与我的first answer相同。

使用插件jquery验证验证几个相关的选择列表

3 个答案: