jquery - 「選択された」プラグインでjQuery検証を使用するにはどうすればよいですか？

Question

選択したプラグインを使用して、クライアント側で「必須」として検証したい<select>入力がいくつかあります。「chosen」は実際のselect要素を非表示にし、divとspanを含むウィジェットを作成するため、ネイティブHTML5検証は正しく機能していないようです。フォームは送信されませんが（これは良いことです）、エラーメッセージは表示されないため、ユーザーは何が悪いのかわかりません（これは良くありません）。

私はjQuery検証プラグイン（とにかく最終的に使用する予定でした）に目を向けましたが、今のところ運がありません。これが私のテストケースです：

<form>
    <label>Name: <input name="test1" required></label>
    <label>Favorite Color:
        <select name="test2" required>
            <option value=""></option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
        </select>
    </label>
    <input type="submit">
</form>

$(document).ready(function(){
    $('select').chosen();
    $('form').validate();
});

これはselect、エラーメッセージを検証または表示せずに、空の値で通過させます。私がその行をコメントアウトするときchosen()、それはうまくいきます。

chosen()jQuery検証プラグインを使用して入力を検証し、無効な入力のエラーメッセージを表示するにはどうすればよいですか？

score 127 · Accepted Answer

jQuery validateは非表示の要素を無視し、Chosenプラグインはvisibility:hiddenselectに属性を追加するため、次のことを試してください。

$.validator.setDefaults({ ignore: ":hidden:not(select)" }) //for all select

また

$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" }) //for all select having class .chosen-select

関数の直前にこの行を追加しvalidate()ます。それは私にとってはうまくいきます。

score 19 · Accepted Answer

jQuery検証では、非表示になっている要素は取得されませんが、個々の要素を検証するように強制することができます。ちょっとしたハックですが、以下は機能します：

$('form').on('submit', function(e) {
    if(!$('[name="test2"]').valid()) {
        e.preventDefault();
    }
});

使用できる「選択された」要素のみを選択するには$('.chzn-done')

score 5 · Accepted Answer

私の中で。

私のフォームにはクラス「validate」があり、すべての入力要素にはクラス「required」のhtmlコードがあります。

<form id="ProdukProdukTambahForm" class="validate form-horizontal" accept-charset="utf-8" method="post" enctype="multipart/form-data" action="/produk-review/produk/produkTambah" novalidate="novalidate">
     <div class="control-group">
        <label class="control-label" for="sku">SKU</label>
        <div class="controls">
           <input id="sku" class="required span6" type="text" name="sku">
        </div>
     </div>
     <div class="control-group">
        <label for="supplier" class="control-label">Supplier</label>
        <div class="controls">
            <select name="supplier" id="supplier" class='cho span6 {required:true} '>                                           
                <option value=''>-- PILIH --</option>
                <?php
                foreach ($result as $res)
                    {
                    echo '<option value="'.$res['tbl_suppliers']['kode_supplier'].'">'.$res['tbl_suppliers']['nama_supplier'].'</option>';
                    }
                ?>
            </select>
         </div>
      </div>
</form>

およびjquery検証で選択されたjavascriptコード

$(document).ready(function() {
    // - validation
    if($('.validate').length > 0){
        $('.validate').validate({
            errorPlacement:function(error, element){
                    element.parents('.controls').append(error);
            },
            highlight: function(label) {
                $(label).closest('.control-group').removeClass('error success').addClass('error');
            },
            success: function(label) {
                label.addClass('valid').closest('.control-group').removeClass('error success').addClass('success');
            },
            //validate choosen select (select with search)
            ignore: ":hidden:not(select)"
        });
    }
    // - chosen, add the text if no result matched
    if($('.cho').length > 0){
        $(".cho").chosen({no_results_text: "No results matched"});
    }
});

注：入力値がnullの場合、クラスエラーは親'div'に追加されます

score 3 · Accepted Answer

//別の方法を使用して選択した要素を非表示にすることで、これを修正できます。例えば....

$(document).ready(function() {
 $.validator.addMethod(     //adding a method to validate select box//
            "chosen",
            function(value, element) {
                return (value == null ? false : (value.length == 0 ? false : true))
            },
            "please select an option"//custom message
            );

    $("form").validate({
        rules: {
            test2: {
                chosen: true
            }
        }
    });
    $("[name='test2']").css("position", "absolute").css("z-index",   "-9999").chosen().show();

    //validation.....
    $("form").submit(function()
    {
        if ($(this).valid())
        {alert("valid");
    //some code here 
        }
        return false;

    });
});

score 2 · Accepted Answer

この単純なCSSルールは、joomla3のchoomla3の実装で機能します

Chosenは、非表示の選択入力に無効なクラスを追加するため、これを使用して、選択した選択ボックスをターゲットにします

.invalid, .invalid + div.chzn-container a {
    border-color: red !important;
}

score 2 · Accepted Answer

$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" })
selected.jsを使用するには、屋外に配置$(document).ready(function())する必要がありました。

https://stackoverflow.com/a/10063394/4063622

score 1 · Accepted Answer

また、[選択済み]ドロップダウンリストの前にエラーメッセージが表示されるという問題が発生する可能性があります。この問題を解決するための解決策を見つけ、コードをここに貼り付けて共有します

HTML：

<label class="col-sm-3">Select sponsor level *</label>
<asp:DropDownList ID="ddlSponsorLevel" runat="server" CssClass="col-sm-4 required" ClientIDmode="Static" />
<label class="error" id="ddlSponsorLevel-error" for="ddlSponsorLevel"></label>

Javascript：

if (!$('#ddlSponsorLevel').valid()) {
       $('#ddlSponsorLevel-error').text("You must choose a sponsor level");
            return false;
}

Jquery Validationは、実際に非表示のラベルhtml要素を追加しました。この要素を同じIDで別の場所に再定義して、元の場所を上書きすることができます。

score 1 · Accepted Answer

私はこれに取り組んで約1日を過ごしましたが、まったく運がありませんでした！次に、Vtigerが使用しているソースコードを調べて、ゴールドを見つけました。彼らは古いバージョンを使用していましたが、彼らは鍵を持っていました！あなたが使用する必要があります

data-validation-engine="validate[required]"

そうでない場合、クラスが選択のためにクラスを通過する場所が選択されたものに適用され、選択されたものが更新されることはないと考えられます。選択したクラスにクラスを渡さない場合、これは問題になるはずですが、これを行う場合は、これが機能する唯一の方法です。

これは、1.4.2validationEngine2.6.2およびjquery2.1.4を選択した場合です。

// binds form submission and fields to the validation engine
jQuery("#FORMNAME").validationEngine({
    prettySelect : true,
    useSuffix: "_chosen"
    //promptPosition : "bottomLeft"
});

score 1 · Accepted Answer

@Anupalは私を正しい道に導いたが、どういうわけか私は複雑な修正が必要だった

考慮`.chosen`されるようにする

javascript

$.validator.setDefaults({ ignore: ":hidden:not(.chosen)" })

または、選択した名前に付けるその他の名前。これはグローバル構成です。トップレベルでの設定を検討してください

選択したカスタムルールを作成する

BenGに感謝します

html

<select id="field" name="field" class="chosen" data-rule-chosen-required="true">
    <option value="">Please select…&lt;/option>
</select>

javascript

$.validatorここでも、オブジェクトのグローバル構成。前のコマンドの隣に置くことができます

$.validator.addMethod('chosen-required', function (value, element, requiredValue) {
    return requiredValue == false || element.value != '';
}, $.validator.messages.required);

score 0 · Accepted Answer

これがより良い解決策だと思います。

//trigger validation onchange
$('select').on('change', function() {
    $(this).valid();
});

$('form').validate({
    ignore: ':hidden', //still ignore Chosen selects
    submitHandler: function(form) { //all the fields except Chosen selects have already passed validation, so we manually validate the Chosen selects here            
        var $selects = $(form).find('select'),
            valid = true;
        if ($selects.length) {
            //validate selects
            $selects.each(function() {
                if (!$(this).valid()) {
                    valid = false;
                }
            });
        }
        //only submit the form if all fields have passed validation
        if (valid) {
            form.submit();
        }
    },
    invalidHandler: function(event, validator) { //one or more fields have failed validation, but the Chosen selects have not been validated yet
        var $selects = $(this).find('select');     
        if ($selects.length) {
            validator.showErrors(); //when manually validating elements, all the errors in the non-select fields disappear for some reason

            //validate selects
            $selects.each(function(index){
                validator.element(this);
            })
         }
    },
    //other options...
});

注：errorPlacementエラーの表示を処理するには、コールバックも変更する必要があります。.siblings('.errorMessageClassHere')エラーメッセージがフィールドの横にある場合は、の代わりに（またはDOMに応じて他の方法で）使用する必要があります.next('.errorMessageClassHere')。

score 0 · Accepted Answer

jQuery("#formID").validationEngine({
     prettySelect : true,
     useSuffix: "_chzn"
});

jQuery-Validation-Engine / demoChosenLibrary

score 0 · Accepted Answer

これを試すこともできます：

$('form').on('submit', function(event) {
    event.preventDefault();
    if($('form').valid() == true && $('.select-chosen').valid() == true){
        console.log("Valid form");
    } else {
        console.log("Invalid form");
    }
});

.select-chosenそれぞれにクラスを追加することを忘れないでくださいselect。

$('.select-chosen').valid()select非表示の検証を強制します

http://jsfiddle.net/mrZF5/39/

score 0 · Accepted Answer

私のフォームには条件付きで非表示のフィールドが含まれており、選択した非表示のフィールドが検証に失敗するのを防ぐために、デフォルトのignore：hiddenをもう少し拡張しました。

$.validator.setDefaults({ 
  ignore: ":hidden:not(.chosen-select + .chosen-container:visible)"  //for all select having class .chosen-select
    })

score 0 · Accepted Answer

2018年に、jQueryvalidateが名前のない入力フィールドについて不平を言っていることを確認しています。この入力フィールドは、jQueryChosenplguinによって追加されます。

このバグは、chosenを使用するときに何よりも先に発生します。

score 0 · Accepted Answer

この回答に感謝しますhttps://stackoverflow.com/a/40310699/4700162私はiussueを解決します：

Chosen.jquery.jsファイル内で、次のように変更します。

this.form_field_jq.hide().after(this.container);

これとともに：

this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);

score 0 · Accepted Answer

「選択された」プラグインにjQuery検証を使用できます。私のためにうまく働いています。

$('.chosen').chosen({
        allow_single_deselect: true
    });
    $.validator.setDefaults({ ignore: ":hidden:not(select)" });
        $('form').validate({
            highlight: function(element) {
                $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block text-danger',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element.parent());
            }
        }
    });

score 0 · Accepted Answer

selected（）を呼び出した後、以下のjqueryメソッドを使用します

$（ "＃id"）。css（ "display"： ""）。addClass（ "sr-only"）;

sr-onlyはブートストラップクラスです

score 0 · Accepted Answer

私は次のことを行うことでそれを解決することになりました：

これはChosenv1.8.7用でした：

selected.jsを開き、199行目でこれを見つけます。

this.form_field_jq.hide().after(this.container),

これを次のように置き換えます。

this.form_field_jq.addClass('chosen-master').after(this.container),

これらのCSS属性をそのクラスに追加します。

.chosen-master {
  display: inline-block !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

参照：https ：//stackoverflow.com/a/64491538/7353382

jquery - 「選択された」プラグインでjQuery検証を使用するにはどうすればよいですか？

18 に答える 18

考慮.chosenされるようにする

選択したカスタムルールを作成する

Related

Reference

考慮`.chosen`されるようにする