JQuery सत्यापन सूचनाओं के लिए ट्विटर बूटस्ट्रैप आबादी का उपयोग कैसे करें?

84

मैं बहुत आसानी से बूटस्ट्रैप का उपयोग करते हुए पॉपओवर कर सकता हूं, और मैं मानक jQuery सत्यापन प्लगइन या jQuery सत्यापन इंजन का उपयोग करके सत्यापन भी कर सकता हूं, लेकिन मैं यह पता नहीं लगा सकता कि एक को दूसरे में कैसे खिलाया जाए।

मुझे लगता है कि मुझे जो कुछ चाहिए वह कुछ हुक है जो सत्यापनकर्ता द्वारा बुलाया जाता है जब वह एक अधिसूचना प्रदर्शित करना चाहता है, तो उसे एक बंद करें जो संदेश और लक्ष्य तत्व को एक पॉपओवर में भेजता है। यह एक तरह की निर्भरता इंजेक्शन की तरह लगता है।

सिद्धांत रूप में सभी अच्छे हैं, लेकिन मैं अभी यह पता नहीं लगा सकता कि वह हुक कहां है, या यहां तक ​​कि अगर कोई भी या तो सत्यापन इंजन में मौजूद है। वे दोनों प्लेसमेंट, रैपर, शैलियों के सभी प्रकार के विकल्पों के साथ सूचनाओं को प्रदर्शित करने के लिए जिम्मेदारी लेने पर आमादा हैं, जब मैं त्रुटि प्रकार (ओं) के बाद (मुझे आवश्यक रूप से संदेश पाठ की आवश्यकता भी नहीं है) और तत्व से संबंधित है सेवा। मैंने पूरे फॉर्म के लिए हुक ढूंढे हैं, न कि व्यक्तिगत सूचनाओं के।

मैं बहुत सत्यापन प्रणालियों को पसंद करता हूं जो नियमों को परिभाषित करने के लिए कक्षाओं का उपयोग करते हैं, क्योंकि वे गतिशील रूप से बनाए गए रूपों के साथ अच्छी तरह से खेलते हैं।

किसी के पास समाधान है या बेहतर विचार है?

jquery  validation  twitter-bootstrap  popover 
— सिन्क्रो
स्रोत

जवाबों:

21

पर एक नजर डालें highlightऔर showErrors jQuery सत्यापनकर्ता विकल्प , इन आप अपने स्वयं के कस्टम त्रुटि पर प्रकाश डाला है कि ट्रिगर बूटस्ट्रैप R आर में हुक करने देगा।

— क्रिस फुलस्टो
स्रोत
यह बहुत अच्छा है, धन्यवाद। हाइलाइट और unhighlight वही है जो मैं ढूंढ रहा था।
— सिंक्रोच
80

यह एक हाथ से उदाहरण है:

$('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 बाहर की जाँच करें ।

— केनी मेयर
स्रोत
3
Upvoted क्योंकि यह मैं क्या देख रहा था की दिशा में है। :-) एक संस्करण के लिए मेरा जवाब देखें।
— Namin
यदि यह एक बहुस्त्र्पीय रूप है, तो क्या करें
— टैचियन
4
बस एक त्वरित ध्यान दें कि बूटस्ट्रैप के नवीनतम संस्करण के साथ अब एक .data ("पॉपओवर") कुंजी नहीं है। शायद टकराव से बचने के लिए उन्होंने "bs.popover" की कुंजी बदल दी है। मुझे यह पता लगाने में थोड़ा समय लगा कि मुझे एक अपरिभाषित त्रुटि क्यों हो रही थी । तो अब आपको _popover.data ("bs.popover") का उपयोग करने की आवश्यकता होगी । Options.content = value.message; ऊपर दिए गए कोड में।
— davidethell 19
मैं आवश्यक फ़ील्ड के अलावा अन्य त्रुटि प्रकार पर पॉपअप कैसे प्रदर्शित कर सकता हूं। मेरे कहने का मतलब यह है कि मैं केवल विशिष्ट नियमों पर त्रुटि प्रदर्शित करने के लिए इसे कैसे अनुकूलित कर सकता हूं।
— अर्जुन
वास्तव में एक छोटी सी समस्या है जिसे आप आसानी से jsFiddle में देख सकते हैं। यदि फ़ील्ड की आवश्यकता नहीं है और कुछ नियम टूट गया है, तो पॉप BUT दिखाता है यदि मैं फ़ील्ड खाली करता हूं और किसी अन्य फ़ील्ड पर ध्यान केंद्रित करता हूं, तो पॉपओवर अभी भी है। सक्सेसलिस्ट पर पहला लूप कभी नहीं कहा जाता है, इसलिए "शो" की स्थिति में आने के बाद पॉपओवर कभी "छिपाने" की स्थिति में नहीं होता है। क्या इसके बारे में हम कुछ कर सकते हैं?
— G4bri3l
9

क्रिस फुल्स्टोव के पास यह सही था, लेकिन इसमें अभी भी मुझे थोड़ा समय लगा, इसलिए पूरा कोड प्रस्तुत किया:

यह त्रुटि पर पॉपओवर दिखाता है, और डिफ़ॉल्ट त्रुटि लेबल को छुपाता है:

$('#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 वर्ण' और डेटा-मूल-शीर्षक = 'अमान्य पासवर्ड' के साथ अपने #password इनपुट में इनलाइन निर्दिष्ट किया। आपको अपने फॉर्म में rel = 'popover' भी चाहिए।

यह काम करता है, लेकिन पॉपओवर अनदेखी पर फ़्लिकर करता है। किसी भी विचार कैसे तय करने के लिए?

— वरुण सिंह
स्रोत
6

यहां वरुण सिंह के उत्कृष्ट सुझाव का अनुसरण किया गया है, जो मान्यता के "झिलमिलाहट" मुद्दे को रोकता है, हालांकि पॉपअप पहले से मौजूद होने के बावजूद "दिखाने" की कोशिश कर रहा है। मैंने बस एक एरर स्टेट्स अरै ऐड किया है कैप्चर करने के लिए कि कौन से एलिमेंट्स एरर दिखा रहे हैं और कौन से नहीं। एक जादू की तरह काम करता है!

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'
});
— जेफरी गिल्बर्ट
स्रोत
इस पृष्ठ पर यह एकमात्र उत्तर था जिसने मेरे लिए काम किया। शर्म की बात है कि इसे ज्यादा वोट नहीं दिया गया।
— 1
1
क्या इसका मतलब यह नहीं है कि आपको उस popoverहर एक क्षेत्र के लिए एक स्पष्ट परिभाषित करने की आवश्यकता है जिसे आप सत्यापित करना चाहते हैं? यदि ऐसा है तो पागल है ।
— g33kz0r
अधिकांश उपयोग के मामलों के लिए, मुझे उम्मीद है कि यह पूरी तरह से स्वीकार्य है। यदि आपके पास अधिक इष्टतम समाधान है, तो इसे जोड़ने के लिए स्वतंत्र महसूस करें :)
— जेफरी गिल्बर्ट
5

JQuery Validation Plugin (संस्करण 1.9.0 के साथ परीक्षण) के लिए यह jQuery एक्सटेंशन चाल चलेगा।

https://github.com/tonycoco/rails_template/blob/master/files/assets/javascripts/jquery.validate.bootstrap.js

यह कुछ रेल-एसक त्रुटि संदेश में भी जोड़ता है।

— tonycoco
स्रोत
यह भी खूब रही। सुपर सहायक। अब यह जानने के लिए कि टीओएस चेकबॉक्स के लिए एक उपयुक्त संदेश कैसे प्राप्त किया जाए ...
— tig
3

मैं बूटस्ट्रैप के सीएसएस को बदलना पसंद करता हूं। बस सही जगह पर 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;
}
— अल्बर्टो चवाइस
स्रोत
यह दृष्टिकोण मेरे लिए सबसे अच्छा लगता है :)। यह वही है जो मैं सोच रहा था
— फ्रेशब्लड
3

इस तरह मैंने इसे बूटस्ट्रैप 2.x और jQuery वेलिडेट 1.9 के साथ किया 

$('#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');
    }});
— जेमी आर रिटलेवस्की
स्रोत
3

कृपया निम्नलिखित पर एक नज़र डालें:
- 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');

        });

    }

});
— Codemator
स्रोत
सिर के लिए बहुत धन्यवाद! बूटस्ट्रैप के लिए मेरा संस्करण नीचे देखें लेकिन टूलटिप्स के साथ। मेरी राय में यह आबादी की तुलना में अधिक सुरुचिपूर्ण है।
— एड्रियन पी।
3

सिर के लिए बहुत धन्यवाद! यहाँ बूटस्ट्रैप के लिए मेरा संस्करण है, लेकिन टूलटिप्स के साथ। मेरी राय में यह आबादी की तुलना में अधिक सुरुचिपूर्ण है। मुझे पता है कि सवाल पॉपओवर के लिए था इसलिए कृपया इस कारण से मतदान न करें। शायद किसी को यह इस तरह से पसंद आएगा। मुझे पसंद है जब मैं कुछ खोज रहा हूं और मुझे स्टैकओवरफ्लो पर नए विचार मिले। नोट: फॉर्म पर कोई मार्कअप आवश्यक नहीं है।

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

            });

        }

    });
— एड्रियन पी।
स्रोत
1
मैंने आपके दृष्टिकोण का उपयोग करने की कोशिश की, लेकिन मुझे प्राप्त करना और त्रुटि होना शुरू हो गया। ant वह समस्या यह है कि यदि आप Jquery UI का उपयोग करते हैं तो आपको संघर्ष मिलेगा क्योंकि दोनों टूलटिप का उपयोग करते हैं। मुझे पता है कि इसके लिए एक समाधान है, लेकिन बस दूसरों को यह जानने की अनुमति दें।
— रिचर्ड पेरेज़
+1 jQuery के यूआई के लिए सिर! टूलट जेएस कार्यों को शामिल नहीं करने के लिए आपको अपने कस्टम डाउनलोड (jQueryUI या बूटस्ट्रैप) को कॉन्फ़िगर करना होगा। यह किसी भी टूलटिप के लिए वैसे भी एक संघर्ष होगा यदि आप ऐसा करने में विफल रहे।
— एड्रियन पी।
हे वहाँ मैं regex के साथ अपने कोड का उपयोग करने और stackoverflow.com/questions/16087351/… पर एक त्रुटि होने की कोशिश कर रहा था । क्या आपको लगता है कि आप मदद कर सकते हैं? :)
— १harma
@psharma बूटस्ट्रैप या टूलटिप के साथ कुछ नहीं करना है। आपकी त्रुटि आपके नियम की घोषणा है क्योंकि आपको आपके प्रश्न का उत्तर मिल गया है। त्रुटि संदेश ने कहा: शर्तें अपरिभाषित हैं!
— एड्रियन पी।
किसी कारण से, यह एकमात्र समाधान है जो मेरे लिए काम करता है। धन्यवाद!
— suchanoob
2

इसी तरह से मैंने इसे बनाया। लेकिन इसमें मान्य स्क्रिप्ट में 2 बदलाव करना शामिल है (मुझे यहां बूटस्ट्रैप 1.4 के लिए कोड मिला है और फिर इसे संशोधित किया गया है - http://mihirchitnis.net/2012/01/customizing-error-messages-use-jquery-validate-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.validate.js 2 चीज़ों को बदलने की आवश्यकता है
। 1. इस फ़िक्स को लागू करें - https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bddee89bb627de5a53a7ed20a
2। लाइन 647 के बाद (showLabel फ़ंक्शन में) ) लाइन .addClass(this.settings.errorClass)ऐड लाइन के बाद : .addClass("help-inline")
किसी को मान्य फ़ंक्शन में दूसरा फिक्स लागू करने का एक तरीका मिल सकता है, लेकिन मुझे एक रास्ता मिल गया, क्योंकि शोलेबेल को हाइलाइट के बाद कहा जाता है।

— बेफिक्रे
स्रोत
2

यह वही है जो मैंने ट्विटर बूटस्ट्रैप दिशानिर्देशों के अनुरूप करने के लिए अपने सत्यापन में रखा है। त्रुटि सत्यापन संदेश एक में डाल दिया है <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');
}
— Namin
स्रोत
2

यहां ऊपर केनी मेयर के उत्कृष्ट उत्तर का अपडेट दिया गया है । कुछ मुद्दे थे जिन्होंने इसे मेरे लिए काम करने से रोका, जिन्हें मैंने इस स्निपेट में संबोधित किया है:

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");
        });
    }
— tofirius
स्रोत
पहल के लिए धन्यवाद। जैसे ही मैं देख सकता हूं कोड बहुत बदल गया है :-)
— केनी मेयर
1

यकीन नहीं होता कि यह चर्चा के लिए प्रासंगिक है क्योंकि मूल पोस्टर ने बूटस्ट्रैप पॉपओवर को दिखाने / छिपाने के लिए हुक के लिए कहा था।

मैं साधारण सत्यापन की तलाश कर रहा था और आबादी को कोई फर्क नहीं पड़ता था। एक संबंधित पोस्ट और Google खोज परिणामों में पहले से ही इस प्रश्न के डुप्लिकेट को चिह्नित किया गया है। तो यह इस उत्कृष्ट @ ReactiveRaven के jqValidation JS का उल्लेख करने के लिए समझ में आता है, जिसे अक्सर jqBootstrapValidation कहा जाता है, जो ट्विटर बूटस्ट्रैप के साथ अच्छी तरह से काम करता है। सेटअप कुछ ही मिनट लगते हैं। यहाँ डाउनलोड करें ।

आशा है कि यह मूल्य जोड़ता है।

— uchamp
स्रोत
1

tl; डॉ। तत्वों की आईडी को स्टोर करने के लिए हैश मैप का उपयोग करके, और पॉप-ऑन-फ्लाई (मैशप जेफरी गिल्बर्ट और केनी मेयर के दृष्टिकोणों) को बनाने के लिए स्पष्ट पॉपुवर्स की गणना करने से बचने की आवश्यकता है।

यहां मेरा टेक है, जो दूसरों द्वारा बताई गई टिमटिमाती समस्या को ठीक करता है, लेकिन @ जेफ्री गिल्बर्ट के जवाब के विपरीत, एक सूची ( errorStates) का उपयोग नहीं करता है, बल्कि एक त्रुटि मानचित्र का उपयोग करता है । हैश नक्शे FTW। मुझे लगता है कि मुझे याद है कि कहीं न कहीं CS में हर समस्या को हैश मैप से हल किया जा सकता है :)

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");
      }
    });
  }
});

इस पर विचार पोस्ट करने वाले अन्य सभी लोगों का धन्यवाद।

— g33kz0r
स्रोत
0

यदि पॉपअप के लिए उपरोक्त केनी मेयर कोड का उपयोग किया जाता है, तो उस नियम से सावधान रहें जो किसी फ़ील्ड की सामग्री की जांच करता है, लेकिन आवश्यक नहीं है जैसे कि एक मान्य URL के कारण पॉपअप फ़ील्ड को साफ़ करने पर गायब नहीं होगा। समाधान के लिए onkeyup नीचे देखें। अगर किसी के पास बेहतर समाधान है, तो कृपया पोस्ट करें।

onkeyup: function(element, event) {
            if($(element).valid())  {
                return $(element).popover("hide");
            }
        }
— मानसून
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.