javascript - 用于验证选择菜单的 jQuery 表单验证插件和工具提示器插件？

Question

我制作了一个简单的脚本来验证我的表单元素，使用 jQuery Validation 脚本和 tooltipster 来显示错误消息。
脚本工作正常，但不适用于选择菜单

$(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();
    });
});

我不知道是什么问题。
可能是因为 tooltipster 功能显示选择菜单的错误消息我错过了什么？

  $('.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

您需要在下一行分配要使用的元素...

$('#eway input[type="text"], #eway select').tooltipster({

它对我有用。

Answer 2

我发现了困难的方法，但是由于 selectmenus 创建了一个单独的跨度，因此您必须将提示附加到 id 为“#”+ mySelect +“-button”的跨度，然后专门为其初始化一个工具提示

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
            }
        },