JQuery मान्यकरण प्लगइन के साथ बूटस्ट्रैप

Question

मैं jQuery मान्यकरण प्लगइन के साथ अपने फ़ॉर्म में मान्यता जोड़ने की कोशिश कर रहा हूं, लेकिन मुझे एक समस्या आ रही है कि इनपुट समूहों का उपयोग करते समय प्लगइन त्रुटि संदेश कैसे डालता है।

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

मेरा कोड: http://jsfiddle.net/hTPY7/4/

Comments

एक ऐप w / बूटस्ट्रैप 3 इनहेरिट किया गया, हंसी आई कि मुझे यह मिल गया है और इसे सालों पहले बुकमार्क किया था जब मुझे आखिरी बार बूटस्ट्रैप 3 के साथ एक ऐप विरासत में मिला था

— एड्रियन जे। मोरेनो

Answer 1

ट्विटर बूटस्ट्रैप 3 के साथ कुल संगतता के लिए, मुझे कुछ प्लगइन्स विधियों को ओवरराइड करने की आवश्यकता है:

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

उदाहरण देखें: http://jsfiddle.net/mapb_1990/hTPY7/7/

Comments

WOrks महान, बस $ (तत्व) जोड़ने के लिए उल्लेख करना चाहता था ।removeClass (errorClass); unhighlight और $ (तत्व) .addClass (errorClass); यदि आप बूटस्ट्रैप हेल्प-ब्लॉक क्लास का उपयोग नहीं करने के लिए सफलता चाहते हैं, तो हाइलाइट करें

— Jay Rizzi

यह एक चीज को छोड़कर अच्छी तरह से काम करता है: jQuery के मान्य 1.11.1 के खिलाफ परीक्षण करना और resetForm()फॉर्म के सत्यापनकर्ता को कॉल unhighlightकरना अमान्य तत्वों पर कॉल नहीं करेगा , जिससे has-errorफॉर्म को रीसेट करते समय कक्षा को हाथ से निकालना आवश्यक हो जाता है। मैं क्या करने के लिए सत्यापनकर्ता को resetForm()सीधे कॉल करने के बजाय निम्नलिखित फ़ंक्शन को कॉल करना चाहता हूं :function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); }

— एड्रियन लोपेज

मुझे नहीं पता कि क्यों कोड मेरे फॉर्म पर काम नहीं कर रहा है :(

— एलिसा रेयेस

हंसमुख होकर यह एक आकर्षण की तरह काम करता है! बहुत बहुत धन्यवाद !!! आपने मुझे संभावित रूप से एक या दो घंटे बचाए।

— racl101

यदि आपके पास बूटस्ट्रैप जैसे रेडियो बटन हैं (लेबल टैग के अंदर रखा गया रेडियो इनपुट), तो आप कुछ इस तरह जोड़ना चाहेंगे कि अगर ब्लॉक हो जाए:else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); }

— इलियट कैमरन

Answer 2

बूटस्ट्रैप 3 के साथ पूर्ण संगतता के लिए मैंने इनपुट-समूह , रेडियो और चेकबॉक्स के लिए समर्थन जोड़ा , जो अन्य समाधानों में गायब था।

अपडेट 10/20/2017 : अन्य उत्तरों के निरीक्षण किए गए सुझाव और रेडियो-इनलाइन के विशेष मार्कअप के लिए अतिरिक्त समर्थन जोड़ा , रेडियो या चेकबॉक्स के समूह के लिए बेहतर त्रुटि प्लेसमेंट और एक कस्टम .novalidation के लिए अतिरिक्त समर्थन। नियंत्रण की मान्यता को रोकने के वर्ग के । आशा है कि यह मदद करता है और सुझाव के लिए धन्यवाद।

सत्यापन प्लगइन शामिल करने के बाद निम्नलिखित कॉल जोड़ें:

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

यह सभी बूटस्ट्रैप 3 फॉर्म कक्षाओं के लिए काम करता है। यदि आप एक क्षैतिज रूप का उपयोग करते हैं, तो आपको निम्नलिखित मार्कअप का उपयोग करना होगा। यह सुनिश्चित करता है कि हेल्प-ब्लॉक टेक्स्ट फॉर्म-समूह के सत्यापन स्टेट्स ("हैव-एरर", ...) का सम्मान करता है ।

<div class="form-group">
    <div class="col-lg-12">
        <div class="checkbox">
            <label id="LabelConfirm" for="CheckBoxConfirm">
                <input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />
                I have read all the information 
            </label>
        </div>
    </div>
</div>

Comments

मैंने ट्वीक किया errorClass: "help-block error-help-block"। मैं नियमित सहायता जानकारी के लिए पहले से ही .help-block का उपयोग कर रहा था, और यह फ़ॉर्म सत्यापन संदेशों के साथ इसे अधिलेखित कर रहा था। एक दूसरे वर्ग को जोड़ने ने इसे अद्वितीय बना दिया और इसलिए अब यह मेरी "वास्तविक" सहायता संदेश को अधिलेखित करने के बजाय जोड़ता है।

— स्कॉट स्टैफ़ोर्ड

— डिलाईट

हैलो व्लादो, क्या आप कुछ और जानकारी दे सकते हैं कि यह आपके लिए काम क्यों नहीं करता है?

— एंड्रियास क्रोहन

रेडियो बटन के एक समूह के लिए, यह पहले विकल्प के नीचे त्रुटि संदेश जोड़ देगा जो अजीब लगता है। आप रेडियो बटन को अलग तरह से व्यवहार करने के लिए इसे ट्विक करना चाहते हैं।

— इलियट कैमरन

आपको बहुत बहुत धन्यवाद मिस्टर @AndreasKrohn ^ _ ^

— Jeancarlo Fontalvo

Answer 3

मैं केवल ट्विटर बूटस्ट्रैप 3 के साथ डिज़ाइन किए गए फ़ॉर्म का उपयोग करता हूं। मैंने सत्यापन के लिए डिफ़ॉल्ट कार्य निर्धारित किए हैं और नियमों के साथ केवल मान्य विधि चला रहा हूं। मैं FontAweSome से प्रतीक का उपयोग करता हूं, लेकिन आप डॉक उदाहरण में ग्लिफ़िकॉन का उपयोग कर सकते हैं।

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
        }
    }
});

किया हुआ। मान्य फ़ंक्शन चलाने के बाद:

$("#default-register-user").validate({
    rules: {
        'login': {
            required: true,
            minlength: 5,
            maxlength: 20
        },
        'email': {
            required: true,
            email: true,
            minlength: 5,
            maxlength: 100
        },
        'password': {
            required: true,
            minlength: 6,
            maxlength: 25
        },
        'confirmpassword': {
            required: true,
            minlength: 5,
            maxlength: 25,
            equalTo: "#password"
        }
    }
});

JSFiddle उदाहरण

Comments

इसके लिए एक JSField रखना बहुत अच्छा होगा

— kofifus

क्या आप स्क्रीनशॉट के लिए इस्तेमाल किया गया HTML पोस्ट कर सकते हैं, कृपया? फिडेल उदाहरण में लाल-स्टाइल त्रुटि संदेश नहीं है और न ही आइकन। धन्यवाद!

— क्रिस्टोफर फ्रांसिस्को

क्रिस्टोफर फ्रांसिस्को, मैंने JSFiddle उदाहरण को अपडेट किया और फ़ॉन्ट भयानक सीएसएस जोड़ें।

— DARK_DIESEL

हाय महान समाधान! आप इसे कैसे संपादित करेंगे ताकि केवल उन फ़ील्ड्स जिनमें नियम हैं, सफलता या विफलता संदेश दिखाते हैं? आपका कोड सभी फ़ील्डों को सीएसएस प्रदर्शित करता है, भले ही नियम हों या न हों

— माइकल स्मिथ

इसका समाधान यह है: नियमों के ठीक ऊपर: "अनदेखा करें:" .ignore:: छिपा हुआ ""। फिर बस उन सभी क्षेत्रों में एक 'अनदेखा' वर्ग जोड़ें जिन्हें आप सत्यापित नहीं करना चाहते हैं

— माइकल स्मिथ

Answer 4

ऊपर दिए गए मिगुएल बोर्ज के उत्तर को जोड़ने पर आप उपयोगकर्ता को हाइलाइट / अनहेल्दी कॉम्बिनेशन ब्लॉक में निम्न पंक्ति जोड़कर हरी सफलता की प्रतिक्रिया दे सकते हैं।

    highlight: function(element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    }

Answer 5

यह वह उपाय है जिसकी आपको आवश्यकता है, आप errorPlacementत्रुटि संदेश डालने के लिए विधि का उपयोग कर सकते हैं

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    errorPlacement: function(error, element) {
        error.insertAfter('.form-group'); //So i putted it after the .form-group so it will not include to your append/prepend group.
    }, 
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

यह मेरे लिए जादू की तरह काम करता है। चियर्स

Comments

error.insertAfter('.form-group');सभी .form-group में त्रुटियां डालें। लेकिन इसने मुझे विचार दिखाया। धन्यवाद

— मिगुएल बोर्जेस

Answer 6

बूटस्ट्रैप 4 के लिए यह काम मेरे साथ अच्छा है

    $.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").addClass('is-invalid');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").removeClass('is-invalid');
        $(element).closest('.form-group').find(".form-control:first").addClass('is-valid');

    },
    errorElement: 'span',
    errorClass: 'invalid-feedback',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

आशा है कि यह मदद करेगा!

Comments

यह बहुत अच्छी तरह से काम करता है! केवल एक चीज जो मैंने जोड़ी वह थीvalidClass: 'valid-feedback'

— सिमोन ज़ेक्स

धन्यवाद, यह वैधता के साथ बूटस्ट्रैप 4 के लिए मेरे लिए काम करता है: 'वैध-प्रतिक्रिया'।

— जकी मोहम्मद

Answer 7

फॉर्म के सत्यापन को जोड़ते समय मैं यहां उपयोग करता हूं:

// Adding validation to form.
        $(form).validate({
            rules: {
                title: {
                    required: true,
                    minlength: 3,
                },
                server: {
                    ipAddress: true,
                    required: true
                }   
            },
            highlight: function(element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function(element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorClass: 'help-block'
        });

यह मेरे लिए बूटस्ट्रैप 3 स्टाइल के लिए काम किया जब jquery सत्यापन लाइब्रेरी का उपयोग कर रहा था।

Answer 8

मैंने इसका उपयोग रेडियो के लिए किया है:

    if (element.prop("type") === "checkbox" || element.prop("type") === "radio") {
        error.appendTo(element.parent().parent());
    }
    else if (element.parent(".input-group").length) {
        error.insertAfter(element.parent());
    }
    else {
        error.insertAfter(element);
    }

इस तरह से त्रुटि पिछले रेडियो विकल्प के तहत प्रदर्शित होती है।

Comments

शानदार ढंग से सरल जवाब है, धन्यवाद - बस अतिरिक्त प्रकार खंड अपने मौजूदा errorPlacement तर्क में slotted

— theotherdy

Answer 9

मुझे पता है कि यह सवाल बूटस्ट्रैप 3 के लिए है, लेकिन जैसा कि कुछ बूटस्ट्रैप 4 संबंधित प्रश्न डुप्लिकेट के रूप में इस एक पर पुनर्निर्देशित किया गया है, यहां स्निपेट बूटस्ट्रैप 4-संगत है:

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-danger');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-danger');
    },
    errorElement: 'small',
    errorClass: 'form-control-feedback d-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if(element.prop('type') === 'checkbox') {
            error.appendTo(element.parent().parent().parent());
        } else if(element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent().parent());
        } else {
            error.insertAfter(element);
        }
    },
});

कुछ अंतर हैं:

• के has-dangerबजाय कक्षा का उपयोगhas-error
• बेहतर त्रुटि स्थिति रेडियो और चेकबॉक्स

Comments

बूटस्ट्रैप 4 में अब .has-*कक्षाएं नहीं हैं। getbootstrap.com/docs/4.3/migration/#forms-1

— फ्रेड

Answer 10

बूटस्ट्रैप के लिए 4 बीटा बूटस्ट्रैप के अल्फा और बीटा संस्करणों (और बूटस्ट्रैप 3), एस्प के बीच कुछ बड़े बदलाव थे। मान्यता बनाने के संबंध में।

सबसे पहले, आइकन को सही ढंग से रखने के लिए आपको स्टाइलिंग को जोड़ना होगा जो कि बूटस्ट्रैप 3 में था और अब बूटस्ट्रैप 4 बीटा में नहीं है ... यहाँ मैं क्या उपयोग कर रहा हूँ

.fa.valid-feedback,
.fa.invalid-feedback {
    position: absolute;
    right: 25px;
    margin-top: -50px;
    z-index: 2;
    display: block;
    pointer-events: none;
}

.fa.valid-feedback {
    margin-top: -28px;
}

कक्षाएं भी बदल गई हैं क्योंकि बीटा उन कक्षाओं के बजाय नियंत्रण के 'राज्य' का उपयोग करता है जो आपके पोस्ट किए गए कोड को प्रतिबिंबित नहीं करते हैं, इसलिए आपका उपरोक्त कोड काम कर सकता है। वैसे भी, आपको फॉर्म को 'वैरिफाइड' श्रेणी में जोड़ना होगा जो या तो सफलता या हाइलाइट लाइटबैक कॉलबैक को हाइलाइट करेगा।

$(element).closest('form').addClass('was-validated');

मैं प्रपत्र नियंत्रण मदद पाठ के लिए नए तत्व और कक्षाओं का उपयोग करने की भी सिफारिश करूंगा

errorElement: 'small',
errorClass: 'form-text invalid-feedback',

Answer 11

इससे खेत लहलहा उठते हैं

 $("#form_questionario").validate({
                debug: false,
                errorElement: "span",
                errorClass: "help-block",
                highlight: function (element, errorClass, validClass) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest('.form-group').removeClass('has-error');
                },
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                        error.insertBefore(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                // Specify the validation rules
                rules: {
                        'campo1[]': 'required',
                        'campo2[]': 'required',
                        'campo3[]': 'required',
                        'campo4[]': 'required',
                        'campo5[]': 'required'
                        },

                submitHandler: function (form) {
                    form.submit();
                }
            });

Answer 12

इस https://stackoverflow.com/a/18754780/966181 पर रेडियो-इनलाइन फिक्स जोड़ें

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if (element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Comments

यह सरल है, बहुत मददगार है। धन्यवाद।

— चॉफोटडी

Answer 13

DARK_DIESEL के जवाब ने मेरे लिए बहुत काम किया; यहाँ ग्लिफ़िकॉन का उपयोग करने वाले समकक्ष के लिए कोई भी कोड है:

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('span.glyphicon').remove();
            $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('span.glyphicon').remove();
            $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
        }
    }
});

Answer 14

इस सैंपल कोड का उपयोग करके देखें। Jquery सत्यापन प्लगइन और अतिरिक्त विधियों का उपयोग करना। यह मेरी परियोजना के लिए काम करने वाला कोड है। आशा है कि यह आपकी मदद करता है

//jquery validation booking page
	
	// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='book']").validate({
	  //on key up validation
	  onkeyup: function(element) {
      $(element).valid(); 
    },  
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      fname: {
        required: true,
        lettersonly: true
        },
      lname:{
        required: true,
        lettersonly: true
        },
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      fname: {
      required:"Please enter your firstname",
      lettersonly:"Letters allowed only"
      },
      lname: {
      required:"Please enter your lastname",
      lettersonly:"Letters allowed only"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

.error {
  color: red;
  margin-left: 5px;
  font-size:15px;
}

<script src="design/bootstrap-3.3.7-dist/js/jquery.validate.js"></script>
<script src="design/bootstrap-3.3.7-dist/js/additional-methods.js"></script>

<form name="book" id="book" action="" method="post">

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="fname">First Name</label>
            <input type="text" name="fname" id="fname" class="form-control" placeholder="First Name">
        </div>
        <div class="col-md-6">
            <label class="" for="lname">Last Name</label>
            <input type="text" name="lname" id="lname" class="form-control" placeholder="Last Name">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="date">Date</label>
            <input type="text" id="date" class="form-control datepicker px-2" placeholder="Date of visit">
        </div>
        <div class="col-md-6">
            <label class="" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Email">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="treatment">Service You Want</label>
            <select name="treatment" id="treatment" class="form-control">
                <option value="">Hair Cut</option>
                <option value="">Hair Coloring</option>
                <option value="">Perms and Curls</option>
                <option value="">Hair Conditioning</option>
                <option value="">Manicure</option>
                <option value="">Pedicure</option>
                <option value="">Nails Extension</option>
                <option value="">Nail Design</option>
                <option value="">Waxing Eyebrows</option>
                <option value="">Waxing Hands/Legs</option>
                <option value="">Full Face Waxing</option>
                <option value="">Full Body/Body Parts Wax</option>
            </select>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="note">Notes</label>
            <textarea name="note" id="note" cols="30" rows="5" class="form-control" placeholder="Write your notes or questions here..."></textarea>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <center><input type="submit" value="Book Now" class="btn btn-primary btn-lg"></center>
        </div>
    </div>

</form>

Answer 15

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

<div class="form-group">
  <label class="control-label" for="new-task-due-date">When is the task due?</label>
  <div class="input-group date datepicker">
    <input type="text" id="new-task-due-date" class="required form-control date" name="dueDate" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>                          
  </div>
  <label for="new-task-due-date" class="has-error control-label" style="display: none;"></label>
</div>