JQuery বৈধতা বিজ্ঞপ্তিগুলির জন্য টুইটার বুটস্ট্র্যাপ পপওভারগুলি কীভাবে ব্যবহার করবেন?

Question 1

আমি পপওভারগুলিকে সহজেই বুটস্ট্র্যাপ ব্যবহার করে সহজে উপস্থিত হতে পারি এবং আমি স্ট্যান্ডার্ড জিকুয়েরি বৈধতা প্লাগইন বা জিকুয়েরি বৈধকরণ ইঞ্জিন ব্যবহার করে বৈধতাগুলিও করতে পারি , তবে আমি কীভাবে অন্যটিতে ফিড করব তা বুঝতে পারি না।

আমি মনে করি আমার যা দরকার তা হুক যা যাচাইকারীর দ্বারা ডাকা হয় যখন এটি কোনও বিজ্ঞপ্তি প্রদর্শন করতে চায়, এটিকে বন্ধ করে দেয় যা বার্তা এবং লক্ষ্য উপাদানটিকে একটি পপওভারে পাস করে। এটিকে এক ধরনের নির্ভরতা ইঞ্জেকশন বলে মনে হচ্ছে।

তাত্ত্বিকভাবে সমস্ত সুন্দর, তবে আমি ঠিক বুঝতে পারি না যে সেই হুকটি কোথায়, বা এমনকি যদি কোনও বৈধতা ইঞ্জিনে থাকে তবে। তারা উভয়ই অবস্থানের জন্য সমস্ত ধরণের বিস্তৃত বিকল্পগুলির সাথে বিজ্ঞপ্তি প্রদর্শন করার জন্য দায়বদ্ধ হওয়ার বিষয়ে মনে করছে বলে মনে হয়, মোড়ক, শৈলীর পরে যখন আমি পরে থাকি ত্রুটি ধরণের (গুলি) (আমার অবশ্যই বার্তা পাঠ্যের প্রয়োজন হয় না) এবং এটি সম্পর্কিত উপাদান প্রতি. আমি সম্পূর্ণ ফর্মের জন্য হুকগুলি পেয়েছি, পৃথক বিজ্ঞপ্তিগুলি নয়।

আমি অনেকগুলি বৈধতা সিস্টেমগুলি পছন্দ করি যা নিয়মগুলি সংজ্ঞায়িত করতে ক্লাস ব্যবহার করে, কারণ তারা গতিশীলভাবে তৈরি ফর্মগুলির সাথে সুন্দরভাবে খেলেন।

কারও সমাধান বা আরও ভাল ধারণা আছে?

Question 2

কটাক্ষপাত highlightএবং showErrors jQuery এর ভ্যালিডেটার অপশন , এই আপনি আপনার নিজস্ব ত্রুটি হাইলাইট যে ট্রিগার বুটস্ট্র্যাপ popovers মধ্যে হুক দেওয়া হবে।

Question 3

এটি হ্যান্ড-অন উদাহরণ:

$('form').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
    }
});

এখানে চিত্র বর্ণনা লিখুন

এটি সত্যই বুটস্ট্র্যাপ পপওভার ব্যবহার করে না তবে এটি দেখতে দুর্দান্ত দেখাচ্ছে এবং এটি অর্জন করা সহজ।

হালনাগাদ

সুতরাং, পপওভার বৈধতা পেতে আপনি এই কোডটি ব্যবহার করতে পারেন:

$("form").validate({
  rules : {
    test : {
      minlength: 3 ,
      required: true
    }
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      return $(value).popover("hide");
    });
    return $.each(errorList, function(index, value) {
      var _popover;
      _popover = $(value.element).popover({
        trigger: "manual",
        placement: "top",
        content: value.message,
        template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
      });
      // Bootstrap 3.x :      
      //_popover.data("bs.popover").options.content = value.message;
      // Bootstrap 2.x :
      _popover.data("popover").options.content = value.message;
      return $(value.element).popover("show");
    });
  }
});

আপনি এই জাতীয় কিছু পান:

এখানে চিত্র বর্ণনা লিখুন

পরীক্ষা করে দেখুন jsFiddle ।

Question 4

ক্রিস ফুলস্টোর এটি সঠিক ছিল তবে এটি এখনও আমাকে কিছুটা সময় নিয়েছিল, তাই সম্পূর্ণ কোডটি হেরেস:

এটি পপওভার অন ত্রুটি দেখায় এবং ডিফল্ট ত্রুটি লেবেলগুলি লুকায়:

$('#login').validate({
  highlight: function(element, errClass) {
    $(element).popover('show');
  },
  unhighlight: function(element, errClass) {
    $(element).popover('hide');
  },
  errorPlacement: function(err, element) {
    err.hide();
  }
}).form();

এটি পপওভার সেট আপ করে। আপনার কেবলমাত্র এটির প্রয়োজন যা ট্রিগার: 'ম্যানুয়াল'

$('#password').popover({
  placement: 'below',
  offset: 20,
  trigger: 'manual'
});

পপওভারে পাস হওয়া শিরোনাম এবং সামগ্রীর বৈশিষ্ট্যগুলি কাজ করছে না, তাই আমি তাদের ডেটা-সামগ্রী = 'ন্যূনতম 5 অক্ষর' এবং ডেটা-অরিজিনাল-শিরোনাম = 'অবৈধ পাসওয়ার্ড' সহ আমার # পাসওয়ার্ড ইনপুটগুলিতে এগুলি ইনলাইন নির্দিষ্ট করে দিয়েছি। আপনার নিজের ফর্মে rel = 'পপওভার' দরকার।

এটি কাজ করে, তবে পপওভার ফ্লিকারগুলি অনির্বাচন করার পরে। কোন ধারণা কিভাবে যে ঠিক কিভাবে?

Question 5

এখানে বরুণ সিংহের কাছ থেকে চমৎকার পরামর্শের একটি ফলোআপ দেওয়া হয়েছে যা পপআপ ইতিমধ্যে উপস্থিত থাকা সত্ত্বেও বৈধতার "ঝাঁকুনি" বিষয়টিকে অবিচ্ছিন্নভাবে "প্রদর্শন" করার চেষ্টা করে preven কোন উপাদানগুলি ত্রুটি প্রদর্শন করছে এবং কোনটি নয় তা ক্যাপচার করতে আমি কেবল একটি ত্রুটিযুক্ত রাজ্য অ্যারে যুক্ত করেছি। একটি যাদুমন্ত্র মত কাজ করে!

var errorStates = [];

$('#LoginForm').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass) {
        if($.inArray(element, errorStates) == -1){
            errorStates[errorStates.length] = element;
            $(element).popover('show');
        }
    }, 
    unhighlight: function (element, errorClass, validClass) {
        if($.inArray(element, errorStates) != -1){
            this.errorStates = $.grep(errorStates, function(value) {
              return value != errorStates;
            });
            $(element).popover('hide');
        }
    },
    errorPlacement: function(err, element) {
        err.hide();
    }
});

$('#Login_unique_identifier').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

$('#Login_password').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

Question 6

JQuery বৈধকরণ প্লাগইন (সংস্করণ 1.9.0 দিয়ে পরীক্ষিত) এর জন্য এই jQuery এক্সটেনশনটি কৌশলটি করবে।

https://github.com/tonycoco/rails_template/blob/master/files/assets/javascript/jquery.uthorate.bootstrap.js

এটি কয়েকটি রেল-এস্ক ত্রুটি বার্তাপ্রেরণে যুক্ত করে।

Question 7

আমি বুটস্ট্র্যাপের সিএসএস পরিবর্তন করতে পছন্দ করি। সবেমাত্র jQuery এর ক্লাসগুলি সঠিক জায়গায় যুক্ত করা হয়েছে। ক্ষেত্র-বৈধতা-ত্রুটি এবং ইনপুট-বৈধকরণ-ত্রুটি

    form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}

Question 8

এটি আমি বুটস্ট্র্যাপ 2.x এবং jQuery বৈধতা 1.9 দিয়ে এটি করেছি with

$('#form-register').validate({ errorElement: 'span', errorClass:'help-inline', highlight:    function (element, errorClass) {
        $(element).parent().parent().addClass('error');
    }, unhighlight: function (element, errorClass) {
        $(element).parent().parent().removeClass('error');
    }});

Question 9

দয়া করে নীচের দিকে একবার দেখুন:
- https://gist.github.com/3030983
আমি মনে করি এটি সর্বোপরি সহজ।

সম্পাদনা

লিঙ্ক থেকে কোড:

$('form').validate({
    rules: {
        numero: {
            required: true
        },
        descricao: {
            minlength: 3,
            email: true,
            required: true
        }
    },

    showErrors: function (errorMap, errorList) {

        $.each(this.successList, function (index, value) {
            $(value).popover('hide');
        });


        $.each(errorList, function (index, value) {

            console.log(value.message);

            var _popover = $(value.element).popover({
                trigger: 'manual',
                placement: 'top',
                content: value.message,
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            _popover.data('popover').options.content = value.message;

            $(value.element).popover('show');

        });

    }

});

Question 10

মাথা আপ জন্য অনেক ধন্যবাদ! বুটস্ট্র্যাপের জন্য তবে টুলটিপসের সাথে আমার সংস্করণটি এখানে। আমার মতে এটি পপওভারের চেয়ে আরও মার্জিত। আমি জানি প্রশ্নটি পপওভারের জন্য ছিল তাই দয়া করে এই কারণে ভোট দিন না। হয়তো কেউ এইভাবে পছন্দ করবে। আমি যখন আমি কোনও বিষয় অনুসন্ধান করি এবং স্ট্যাকওভারফ্লোতে আমি নতুন ধারণা পেয়েছি তখন আমি পছন্দ করি। দ্রষ্টব্য: ফর্মটিতে কোনও মার্কআপ প্রয়োজনীয় নয়।

    $('#LoginForm').validate({
        rules: {
            password: {
                required: true,
                minlength: 6
            },

            email_address: {
                required: true,
                email: true
            }
        },
        messages: {
            password: {
                required: "Password is required",
                minlength: "Minimum length is 6 characters"
            },
            email_address: {
                required: "Email address is required",
                email: "Email address is not valid"
            }
        },  
        submitHandler: function(form) {
            form.submit();
        },

        showErrors: function (errorMap, errorList) {

            $.each(this.successList, function (index, value) {
                $('#'+value.id+'').tooltip('destroy');
            });


            $.each(errorList, function (index, value) {

                $('#'+value.element.id+'').attr('title',value.message).tooltip({
                    placement: 'bottom',
                    trigger: 'manual',
                    delay: { show: 500, hide: 5000 }
                }).tooltip('show');

            });

        }

    });

Question 11

এইভাবেই আমি এটি ঘটালাম। তবে এতে বৈধতা স্ক্রিপ্টে 2 টি পরিবর্তন করা জড়িত (আমি এখানে বুটস্ট্র্যাপ 1.4 এর কোড পেয়েছি এবং তারপরে এটি সংশোধন করেছি - http://mihirchitnis.net/2012/01/Customizing-error-messages- using - jquery - uthorate - plugin- টুইটার-বুটস্ট্র্যাপ / )

যাচাই করার জন্য আমার কল:

    $("#loginForm").validate({
  errorClass: "control-group error",
  validClass: "control-group success",
  errorElement: "span", // class='help-inline'
  highlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    } else {
        $(element).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    }
  },
  unhighlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    } else {
        $(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    }
  }
});

তারপরে আপনাকে jquery.uthorate.js এ 2 টি জিনিস পরিবর্তন করতে হবে
1. এই ফিক্সটি প্রয়োগ করুন - https://github.com/bsrykt/jquery-uthoration/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
২. লাইনের পরে (শো লেবেল ফাংশনে, লেবেল অংশটি তৈরি করুন) ) লাইন .addClass(this.settings.errorClass)অ্যাড লাইনের পরে : .addClass("help-inline")
কেউ হয়ত বৈধতা ফাংশনে দ্বিতীয় ফিক্স প্রয়োগের উপায় খুঁজে পেতে পারে তবে আমি একটি উপায় খুঁজে পাইনি, যেহেতু শো লেবেল হাইলাইটের পরে ডাকা হয়।

Question 12

এটিই আমি টুইটার বুটস্ট্র্যাপ নির্দেশিকা মেনে চলতে আমার বৈধতাটিতে রেখেছি put ত্রুটি বৈধতা বার্তাটি একটিতে রাখা হয় <span class=help-inline>এবং আমরা বাইরের ধারকটিকে হ'ল errorবা এই হিসাবে হাইলাইট করতে চাই success:

errorClass:'help-inline',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.clearfix").addClass('error').removeClass('success');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass('error').addClass('success');
}

Question 13

এখানে একটি আপডেট হয় উপরে কেনি মেয়ার এর চমৎকার উত্তর । বেশ কয়েকটি সমস্যা ছিল যা এটি আমার পক্ষে কাজ করা থেকে বিরত ছিল, যা আমি এই স্নিপেটে সম্বোধন করেছি:

showErrors: function (errorMap, errorList) {
        $.each(this.successList, function (index, element) {
            return $(element).popover("destroy");
        });

        $.each(errorList, function (index, error) {
            var ele = $(error.element); //Instead of referencing the popover directly, I use the element that is the target for the popover

            ele.popover({
                    trigger: "manual",
                    placement: "top",
                    content: function(){ //use a function to assign the error message to content
                        return error.message
                    },
                    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            //bs.popover must be used, not just popover
            ele.data("bs.popover").options.content = error.message;

            return $(error.element).popover("show");
        });
    }

Question 14

এটি আলোচনার সাথে প্রাসঙ্গিক কিনা তা নিশ্চিত নয় কারণ আসল পোস্টার বুটস্ট্র্যাপ পপওভারগুলি প্রদর্শন / আড়াল করতে হুক চেয়েছিল for

আমি সাধারণ বৈধতা খুঁজছিলাম এবং পপওভারগুলি কোনও ব্যাপার নয়। একটি সম্পর্কিত পোস্ট এবং গুগল অনুসন্ধান ফলাফলের প্রথমটি ইতিমধ্যে এই প্রশ্নের সদৃশ হিসাবে চিহ্নিত হয়েছে। সুতরাং এই দুর্দান্ত @ রিঅ্যাকটিভরভেনের জকিভিলিগেশন জেএস, যথাযথভাবে বলা হয় jqBootstrapValidation, যা টুইটার বুটস্ট্র্যাপের সাথে ভাল ওয়েডস উল্লেখ করে তা বোঝা যায়। সেটআপটি কয়েক মিনিট সময় নেয়। এখানে ডাউনলোড করুন ।

আশা করি এটির মূল্য যুক্ত হবে।

Question 15

tl; ডাঃ উপাদানগুলির আইডিকে সংরক্ষণ করার জন্য একটি হ্যাশ মানচিত্র ব্যবহার করে এবং ফ্লাইটে পপওভার তৈরি করে (ম্যাশআপ জেফ্রি গিলবার্ট এবং কেনি মায়ারের পদ্ধতির) সুস্পষ্ট পপওভারগুলি গণনা করার প্রয়োজন বোধ করে না।

এখানে আমার গ্রহণ, যা অন্যদের দ্বারা উল্লিখিত ঝাঁকুনির সমস্যার সমাধান করে, তবে @ জেফ্রি গিলবার্টের উত্তরের বিপরীতে, একটি তালিকা ব্যবহার করে না ( errorStates) বরং একটি ত্রুটির মানচিত্র ব্যবহার করে । হ্যাশ মানচিত্র FTW। আমার মনে হয় আমি কোথাও পড়ার কথা মনে করি যে সিএসের প্রতিটি সমস্যা হ্যাশ ম্যাপের সাহায্যে সমাধান করা যেতে পারে :)

var err_map = new Object();     // <--- n.b.
$("form#set_draws").validate({
  rules: {
    myinput: { required: true, number: true },
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      if (value.id in err_map)
      {
        var k = err_map[value.id];
        delete err_map[value.id]; // so validation can transition between valid/invalid states
        k.popover("hide");
      }
    });
    return $.each(errorList, function(index, value) {
      var element = $(value.element);
      if( ! (value.element.id in err_map) ) {
        var _popover = element.popover({
          trigger: "manual",
                 placement: "top",
                 content: value.message,
                 template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
        });
        _popover.data("popover").options.content = value.message;
          err_map[value.element.id] = _popover;
        return err_map[value.element.id].popover("show");
      }
    });
  }
});

অন্যান্য যারা এই বিষয়ে ধারণা পোস্ট করেছেন তাদের ধন্যবাদ।

Question 16

এটি চেকআউট করুন: https://github.com/mingliangfeng/jquery.uthorate.bootstrap.popover

এটি জেএসের পরিবর্তে কীভাবে বুটস্ট্র্যাপ পপওভার সিএসএস ব্যবহার করবেন তা দেখায়। জেএস পদ্ধতি পপআপ জ্বলজ্বলে সমস্যা সৃষ্টি করবে।

Question 17

উপরের কেনি মেয়ের কোডটি যদি পপআপগুলির জন্য ব্যবহার করে থাকেন তবে সাবধান হন যে কোনও ক্ষেত্রের সামগ্রী পরীক্ষা করে তবে এমন কোনও বৈধ URL এর প্রয়োজন নেই এমন ক্ষেত্রটি সাফ করার পরে পপআপটি অদৃশ্য হয়ে যাবে না। সমাধানের জন্য নীচে দেখুন। কারওরও যদি এর থেকে আরও ভাল সমাধান থাকে তবে পোস্ট করুন।

onkeyup: function(element, event) {
            if($(element).valid())  {
                return $(element).popover("hide");
            }
        }