jquery-validate - プラグインjquery validateを使用して、いくつかの依存選択リストを検証します

Question

タイトルにあるように、jQuery Validator Plugin を使用して 2 つの依存する選択リストを検証し、Web サイトのユーザーに 2 つのフィールドすべてからオプションを選択させる必要があります (必須フィールドにする必要があります)。html が表示された場合、2 番目のリストで「無効」タグを読み取ることができます。このタグは、ユーザーが 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

今、私はこのスクリプトを使用しています。これは最初のスクリプトでは機能しますが、2 番目のスクリプトでは機能しません...

<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/のように機能するスクリプトを実現するには、2番目のリストをアクティブにするアクションの構文を見つける必要があります（申し訳ありませんが、1つのリンクをこれ以上投稿できません）

実際のフォームは次のとおりです: provafabio.netsons.org

score 0 · Accepted Answer

フォームや JavaScript コードに問題はないため、例に含まれていない「その他のルールとオプション」の部分に問題があると思います

説明したエラーは、存在しないメソッドのルールを指定したときによく発生します-例については、このフィドルをご覧ください

例えば。これにより、表示されているエラーが表示されます

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

score 0 · Accepted Answer

引用 OP: 「理解する必要があります: 1) 'add' 関数を使用せずに最初のクラスにルールを追加するにはどうすればよいですか 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 Ready 内では使用しません。input

この回答は、ユーザーがボタンを 1 回クリックすると、という名前の新しいフィールド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