使用插件 jquery validate 验证几个依赖选择列表答案

【问题标题】：Validate a couple of dependent select lists with plugin jquery validate使用插件 jquery validate 验证几个依赖选择列表
【发布时间】：2013-02-07 15:54:06
【问题描述】：

正如标题所说，我需要使用 jQuery Validator Plugin 验证 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

【问题讨论】：

-1。抱歉，您还没有将这个问题缩减到最低限度来解释问题，您刚刚剪切并粘贴了一堆代码。您还包含了一个外部链接（对我来说，当我尝试它时）不起作用
我看到这里包含完全相同的代码 - stackoverflow.com/q/14709361/678338
如果您看到该主题，您可以阅读建议以打开一个新主题...
user2043299，是的，这是一个新问题，但@politus 的意思是，您也只是将整个页面的代码转储到了这个问题中。请把它浓缩成一个简洁的例子，只是制作演示所需的最少代码量。然后清楚地解释你希望这段代码做什么。目前，没有人愿意挖掘所有代码来创建自定义答案。

标签： jquery-validate call selectlist

【解决方案1】：

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

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

例如。这会给你你看到的错误

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

【讨论】：

现在链接可以正常工作了（这是一个临时的服务器问题...）如您所见，没有任何其他代码部分（表格在左上角），它可以工作第一个选择列表，但不是第二个
我帮助 OP 解决了他的第一个问题。现在我想知道为什么/如果他首先需要使用rules('add')。除非表单是动态变化的，否则只需使用.validate() 或内联class 来声明规则即可。
@user2043299，因为它是动态变化的，如果这些输入元素还不存在，在 DOM 就绪时调用 rules('add') 是没有意义的。

【解决方案2】：

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

此答案表明，当用户单击一次按钮时，会在 form 中添加一个名为 newfield 的新字段，然后将 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/

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

【讨论】：

所以我必须这样开始：` var $j = jQuery.noConflict(); $j(document).ready(function () { $j("#").validate({ rules: { $j('.sid_list1'): { required: true, } `
@user2043299：不，首先，这个评论部分不是发布代码或进行冗长讨论的最佳场所；请随时附加您的原始帖子以提供更多信息。查看我上面的代码，了解在 .validate() 中声明规则的格式与使用 rules('add') 方法动态添加规则的格式。
我的问题是：我有 2 个选择列表，我必须为类定义规则。上面它们是输入文本，它们是从名称中调用的。如果我理解的话，我必须为第一类定义规则，然后我必须定义生成第二个列表的事件，并为其添加规则，对吧？
@user2043299，是的，我想是的，但是我很难追随你们的 cmets。您能否将您的原始帖子更新为仅包含复制此问题所需的最少数量的代码，以及关于您的内容的非常详细的描述想要它做什么？谢谢。
@user2043299，不，不行。这是我们一直看到的相同的 jQuery 代码。 现在表单的 HTML 在哪里？ 我们只需要查看 最低限度 就可以制作一个工作的 jsFiddle。我们不需要查看整个页面的所有 HTML。尝试向我们展示一个“完整简洁自包含”的示例。否则，您应该研究我上面的答案。它向您展示了两件事……第一，它向您展示了如何为存在的元素声明规则，第二，它向您展示了如何创建新元素并添加规则。

【解决方案3】：

引用 OP：“我需要了解：1）如何将规则添加到第一类不使用“添加”功能 2）如何将规则添加到选择列表 DOM中不存在的”

请参阅以下内容：

"1) 如何在不使用'add'函数的情况下向第一类添加规则"

如果您想通过使用它们的class 一次将这些规则分配给多个元素，则可以使用rules('add')。如果通过name添加规则，还有其他方法。同样，由于您的目标是 class，因此在这里使用 rules('add') 是可以接受的。

"2) 如何将规则添加到 DOM 中不存在的选择列表中"

您不能向 DOM 中尚不存在的内容添加规则。

在用于创建元素的任何函数内部都是您放置 rules('add') 的位置。

这只是一个例子：

如果您使用按钮添加输入元素，您会将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一样。

【讨论】：