jQuery表单验证插件和tooltipster插件来验证选择菜单

jQuery form validation plugin and tooltipster plugin to validate select menu?

本文关键字：插件 验证 选择 菜单 表单 jQuery tooltipster      更新时间：2023-09-26

我做了一个简单的脚本来验证我的表单元素使用jQuery验证脚本和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.");

您需要分配您将在下一行中使用的元素…

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

我发现了困难的方法，但由于选择菜单创建了一个单独的span，所以你必须将提示附加到span上，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
            }
        },
相关文章：