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

Question

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

score 0 · Accepted Answer

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

当您为不存在的方法指定规则时，经常会遇到您描述的错误 -请查看this fiddle以获取示例

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

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

score 0 · Accepted Answer

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

请参阅以下内容：

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

如果您想通过使用它们一次将这些规则分配给许多元素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/

本质上，这与我的第一个答案相同。

score 0 · Accepted Answer

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

这个答案表明，当用户单击一个按钮时，会添加一个名为的新字段newfield，form然后将规则动态添加到这个新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/

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

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

3 回答 3

Related

Reference