javascript - 選択メニューを検証するjQueryフォーム検証プラグインとツールチップスタープラグイン?

Question

jQuery 検証スクリプトとツールチップスターの両方を使用してフォーム要素を検証し、エラー メッセージを表示する簡単なスクリプトを作成しました。
スクリプトは正常に機能しますが、選択メニューでは機能しません

$(document).ready(function(){
    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
       }, "Value must not equal arg.");
    $('#eway input[type="text"]').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });
    $('.inputfield select').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });
    (function($,W,D)
{

    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#eway").validate({
                 errorPlacement: function (error, element) {
                    $(element).tooltipster('update', $(error).text());
                    $(element).tooltipster('show');
                },
                rules: {
                    txtFirstName: "required",
                    txtLastName: "required",
                    txtEmail: {
                        required: true,
                        email: true
                    },
                    txtMobileNumber: "required",
                    Type: { 
                        valueNotEquals: "Default" 
                    }
                },
                messages: {
                    txtFirstName: "Please enter your firstname",
                    txtLastName: "Please enter your lastname",
                    txtEmail: "Please enter a valid email address",
                    txtMobileNumber: "please enter a valid mobile number",
                    Type: "Please select Donation Type"
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }

    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);
    $('#eway').submit(function(e) {
        e.preventDefault();
    });
});

何が問題なのかわからない。
選択メニューのエラーメッセージを表示するツールチップスター機能が原因である可能性があります。

  $('.inputfield select').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });

または、選択メニューを検証するために追加した検証方法を使用しますか?

 $.validator.addMethod("valueNotEquals", function(value, element, arg){
            return arg != value;
           }, "Value must not equal arg.");

Answer 1

私は難しい方法を見つけましたが、selectmenus は別のスパンを作成するため、「#」+ mySelect +「-button」の ID でヒントをスパンにアタッチし、そのためのツールチップを具体的に初期化する必要があります

errorPlacement: function (error, element) {
            if (element.context.nodeName === "SELECT"){
                element = $('#' + element.context.name + '-button');
                $(element).tooltipster({
                    trigger: 'custom',
                    onlyOne: false,
                    positionTracker: true,
                    position: 'right',
                    updateAnimation: false,
                    animation: 'fall',
                    positionTrackerCallback: function(){
                        this.hide();
                    }
                });
            }
            var lastError = $(element).data('lastError'), // get the last message if one exists
                newError = $(error).text();               // set the current message

            $(element).data('lastError', newError);  // set "lastError" to the current message for the next time 'errorPlacement' is called

            if(newError !== '' && newError !== lastError){  // make sure the message is not blank and not equal to the last message before allowing the Tooltip to update itself
                $(element)
                    .tooltipster('content', newError) // insert content into tooltip
                    .tooltipster('show');              // show the tooltip
            }
        },