14

私は validate.jquery.js を使用しています:正常に動作します。しかし、 selected.js を追加すると、選択ドロップダウンの検証が機能しなくなります。

これが私が使用しているJSですhttp://pastebin.com/S9AaxdEN

そして、ここに私の選択フォームがあります:

<select name="category" id="category" placeholder="" class="{validate:{required:true}}">
<option value=""><?php echo lang('category_choice'); ?></option>
<option value="vtt">VTT</option>
<option value="autre">Autre type de v&eacute;lo</option>
</select>

selected.js が検証を無効にする理由がわかりません。

4

4 に答える 4

18

これを修正するには、プロパティ「ignore」を受け取らないクラス「chzn-done」を「validate.settings」に追加します。

var settings = $.data($('#myform')[0], 'validator').settings;
settings.ignore += ':not(.chzn-done)';

例

HTML：

<form method="post" id="form1" action="">
    <fieldset>
        <legend>Login Form</legend>
        <div>
            <label>datos</label>
            <select name="data-select" title="data-select is required" class="chzn-select {required:true}" style="width:150px;">
                <option></option>
                <option value="1">uno</option>
                <option value="2">dos</option>
            </select>
        </div>
        <div>
            <label for="phone">Phone</label>
            <input id="phone" name="phone" class="some styles {required:true,number:true, rangelength:[2,8]}" />
        </div>
        <div>
            <label for="email">Email</label>
            <input id="email" name="email" class="{required:true,email:true}">
        </div>

        <div class="error"></div>
        <div>
            <input type="submit" value="enviar datos"/>
        </div>
    </fieldset>
</form>

JS：

$(function() {

    var $form = $("#form1");

    $(".chzn-select").chosen({no_results_text: "No results matched"});
    $form.validate({
        errorLabelContainer: $("#form1 div.error"),
        wrapper: 'div',
    });

    var settings = $.data($form[0], 'validator').settings;
    settings.ignore += ':not(.chzn-done)';

    $('form').each(function(i, el){

        var settings = $.data(this, 'validator').settings;
        settings.ignore += ':not(.chzn-done)';

    });

});
于 2012-06-27T15:06:26.007 に答える
6

エラーの配置にそれを追加するだけです。非表示のすぐ隣に要素が追加されるため、検証関数で次のコードをオプション引数として使用して配置を変更することをお勧めします。

errorPlacement: function(error,element) {
        if (element.is(":hidden")) {
            //console.log(element.next().parent());
            element.next().parent().append(error);
        }
        else {
            error.insertAfter(element);
        }

    }
于 2013-03-14T20:41:49.357 に答える
4

これにより、検証が表示されないという問題が解決されるだけでなく、標準の「input-validation-error」クラスが selected.js スタイルの選択に適用されます。

フォームが送信されたときと選択された変更の両方で適用する必要がある場合が 2 つあります。以下のコードの 3 つのセクションを参照してください。

  1. 1 つ目は、隠し要素を検証するようにフォーム検証を設定します。
  2. 2 番目は、送信時に選択された検証をチェックします。
  3. 3 番目は、選択された変更の検証をチェックします。

非表示を表示するようにフォーム検証を設定します。

var validator = $("#FormID").data('validator');
validator.settings.ignore = ":hidden:not(select)";

フォーム送信時のチェック:

$('#FormID').on('submit', function () {
    var ChosenDropDowns = $('.chzn-done');
    ChosenDropDowns.each(function (index) {
        var ID = $(this).attr("id");
        if (!$(this).valid()) 
        {
            $("#" + ID + "_chzn a").addClass("input-validation-error");
        }
        else 
        {
            $("#" + ID + "_chzn a").removeClass("input-validation-error");
        }
    });
});

選択した変更をチェックします。

$(".chzn-select").chosen().change(function () {
    var ID = $(this).attr("id");
    if (!$(this).valid()) {
        $("#" + ID + "_chzn a").addClass("input-validation-error");
    }
    else {
        $("#" + ID + "_chzn a").removeClass("input-validation-error");
    }
});
于 2013-04-17T14:12:27.857 に答える
1

フォームが送信された後、選択された選択メニューを検証するという問題もあります。メニューに検証エラーがある場合、メニューを有効に変更すると、検証エラーは解消されません。フォームは引き続き送信できますが、検証エラーが表示されているため、明らかではありません。

invalidHandlerとを使用して修正する例を次に示しますvalid()。

// We'll use this flag so we don't have to validate fields before
// the form has been submitted.
var validatingForm = false;

// This line before validate() is called allows
// chosen menus to be validated
$.validator.setDefaults({ ignore: ":hidden:not(select)" });

$("#yourForm").validate({
    invalidHandler: function() {
        // Now we can validate the fields onChange
        validateForm = true;
    },
        rules: {
            // Probably your validation rules here
        }
    });

//  Now set an onChange event for the chosen menu
$("yourChosenMenu").change(function(){

    // Check that we've tried to submit the form
    if(validateForm) {
        // We tried to submit the form, re-validate on change
        $("yourChosenMenu").valid();
    }
});
于 2015-03-27T21:55:24.243 に答える