JQuery বৈধকরণ প্লাগইন সহ বুটস্ট্র্যাপ


154

আমি 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/


একটি অ্যাপ্লিকেশন ডাব্লু / বুটস্ট্র্যাপ 3 উত্তরাধিকার সূত্রে হেসেছিলেন যে আমি এটি খুঁজে পেয়েছি এবং বহু বছর আগে বুটস্ট্র্যাপ ৩
অ্যাড্রিয়ান জে মোরেনো

উত্তর:


347

টুইটার বুটস্ট্র্যাপ 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/


1
ওওরক্স দুর্দান্ত, কেবল $ (উপাদান)। রেমোভ ক্লাস (ত্রুটিক্লাশ) যুক্ত করার জন্য উল্লেখ করতে চেয়েছিলেন; আনহাইটলাইট এবং $ (উপাদান)। অ্যাডডক্লাস (ত্রুটিক্লাস); আপনি যদি বুটস্ট্র্যাপ সহায়তা-ব্লক ক্লাসটি ব্যবহার না করে সাফল্য চান তা তুলে ধরতে
জে রিজি

3
এটি একটি জিনিস ব্যতীত ভালভাবে কাজ করে: jQuery resetForm()বৈধতা 1.11.1 এর বিরুদ্ধে পরীক্ষা করা এবং কোনও ফর্মের যাচাইকারীকে কল unhighlightকরা অবৈধ উপাদানগুলিকে কল করবে না , has-errorফর্মটি পুনরায় সেট করার সময় হাত দ্বারা শ্রেণি অপসারণ করা প্রয়োজনীয় করে তোলে । আমি যা করি তা যাচাইকারকের resetForm()সরাসরি কল না করে নিম্নলিখিত ফাংশনটি কল করা:function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); }
অ্যাড্রিয়ান লোপেজ

আমি জানি না কেন কোডটি আমার ফর্মটিতে কাজ করছে না :(
অ্যালিসা রেয়েস

গলির দ্বারা এটি একটি মোহন মত কাজ করে! অনেক ধন্যবাদ !!! আপনি আমাকে সম্ভাব্যভাবে এক বা দুই ঘন্টা অনুসন্ধানের জন্য সংরক্ষণ করেছেন।
racl101

1
আপনার যদি বুটস্ট্র্যাপের মতো রেডিও বোতাম থাকে (লেবেল ট্যাগগুলির অভ্যন্তরে রেডিও ইনপুটগুলি দেওয়া হয়), আপনি যদি ব্লক করে থাকেন তবে এর মতো কিছু যুক্ত করতে চাইবেন:else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); }
এলিয়ট ক্যামেরন

86

বুটস্ট্র্যাপ 3 এর সাথে সম্পূর্ণ সামঞ্জস্যের জন্য আমি ইনপুট-গ্রুপ , রেডিও এবং চেকবক্সের জন্য সমর্থন যোগ করেছি , যা অন্যান্য সমাধানগুলিতে অনুপস্থিত ছিল।

আপডেট 10/20/2017 : অন্যান্য উত্তরের পরামর্শগুলি পরিদর্শন করে এবং রেডিও- ইনলাইনের বিশেষ মার্কআপের জন্য অতিরিক্ত সহায়তা যোগ করে , রেডিও বা চেকবক্সগুলির একটি গ্রুপের জন্য আরও ভাল ত্রুটি স্থান নির্ধারণ এবং নিয়ন্ত্রণগুলির বৈধতা রোধে একটি কাস্টম .নোলোইডেশন শ্রেণির জন্য সমর্থন যুক্ত করে। আশা করি এটি পরামর্শ এবং পরামর্শগুলির জন্য ধন্যবাদ।

বৈধতা প্লাগইন অন্তর্ভুক্ত করার পরে নিম্নলিখিত কল যুক্ত করুন:

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

1
আমি টুইট করলাম errorClass: "help-block error-help-block"। আমি নিয়মিত সাহায্যের তথ্যের জন্য ইতিমধ্যে হেল্প-ব্লকটি ব্যবহার করছিলাম এবং এটি ফর্ম বৈধকরণ বার্তাগুলির সাথে ওভাররাইট করছিল। দ্বিতীয় শ্রেণি যুক্ত করা এটিকে অনন্য করে তুলেছে এবং তাই এটি আমার "আসল" সহায়তা বার্তাটিকে ওভাররাইট করার পরিবর্তে সংযোজন করে।
স্কট স্টাফোর্ড

হিলাইট পদ্ধতিটি বলা হয় না
ভ্লাদো পান্ডিয়াস

হ্যালো ভ্লাদো, আপনি কেন আরও কিছু তথ্য দিতে পারেন কেন এটি আপনার পক্ষে কাজ করে না?
Andreas Krohn

একদল রেডিও বোতামের জন্য, এটি প্রথম বিকল্পের নীচে ত্রুটি বার্তা যুক্ত করবে যা অদ্ভুত দেখাচ্ছে। আপনি সম্ভবত রেডিও বোতামগুলির সাথে অন্যরকম আচরণ করার জন্য এটি টুইট করতে চান।
এলিয়ট ক্যামেরন

এত মশাই @AndreasKrohn আপনাকে ধন্যবাদ ^: _ ^
Jeancarlo Fontalvo

23

আমি কেবল টুইটার বুটস্ট্র্যাপ 3 দিয়ে ডিজাইন করা ফর্মগুলি ব্যবহার করি I আমি ফন্টআউওসোম থেকে আইকনগুলি ব্যবহার করি তবে আপনি দস্তাবেজের উদাহরণ হিসাবে গ্লাইফিকন ব্যবহার করতে পারেন।

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

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

জেএসফিডেলের উদাহরণ


1
এর জন্য একটি জেএসফিডেল রাখা দুর্দান্ত হবে
কোফিফাস

আপনি স্ক্রিনশটের জন্য ব্যবহৃত এইচটিএমএল পোস্ট করতে পারেন, দয়া করে? ফিডাল উদাহরণটিতে রেড স্টাইলযুক্ত ত্রুটি বার্তা বা আইকন নেই। ধন্যবাদ!
ক্রিস্টোফার ফ্রান্সিসকো

ক্রিস্টোফার ফ্রান্সিসকো, আমি জেএসফিডেলের উদাহরণ আপডেট করেছি এবং ফন্টটি দুর্দান্ত সিএসএস যুক্ত করেছি।
Dark_DIESEL

হাই দুর্দান্ত সমাধান! আপনি কীভাবে এটি সম্পাদন করবেন যাতে নিয়মযুক্ত কেবলমাত্র ক্ষেত্রগুলি সাফল্য বা ব্যর্থতার বার্তা প্রদর্শন করে? আপনার কোডটি সমস্ত ক্ষেত্র সিএসএস প্রদর্শন করে, নিয়ম না থাকলেও নির্বিশেষে
মাইকেল স্মিথ

সমাধানটি যুক্ত করতে হবে: 'উপেক্ষা: ".ignore,: লুকানো" "বিধিগুলির ঠিক উপরে। তারপরে আপনি যে সমস্ত ক্ষেত্রে যাচাই করতে চান না তার জন্য কেবল একটি 'উপেক্ষা' শ্রেণি যুক্ত করুন
মাইকেল স্মিথ

10

উপরের মিগুয়েল বোর্জেস উত্তরটিতে যুক্ত করা আপনি হাইলাইট / আনহাইটলাইট কোড ব্লকে নিম্নলিখিত লাইনটি যুক্ত করে ব্যবহারকারীকে যে সবুজ সাফল্যের প্রতিক্রিয়া জানাতে পারেন।

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

8

এটি আপনার প্রয়োজন সমাধানটি, আপনি 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');
    }
});

এটা আমার জন্য ম্যাজিক মত কাজ করে। চিয়ার্স


error.insertAfter('.form-group');সমস্ত .for- গ্রুপে ত্রুটি রাখুন। তবে এটি আমাকে ধারণাটি দেখিয়েছিল। আপনাকে ধন্যবাদ
মিগুয়েল বোর্জেস

5

বুটস্ট্র্যাপ 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);
        }
    }
});

আশা করি এটি সাহায্য করবে!


এটি বক্সের বাইরে খুব ভাল কাজ করে! আমি যুক্ত করা কেবলমাত্র ছিলvalidClass: 'valid-feedback'
সাইমন জাইক্স

ধন্যবাদ, এটি বৈধক্লাসের সাথে বুটস্ট্র্যাপ 4 এর জন্য কাজ করেছে: 'বৈধ-প্রতিক্রিয়া'।
জাকি মোহাম্মদ

4

ফর্মটিতে বৈধতা যুক্ত করার সময় আমি যা ব্যবহার করি তা এখানে:

// 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'
        });

Jquery বৈধতা লাইব্রেরি ব্যবহার করার সময় এটি আমার জন্য বুটস্ট্র্যাপ 3 স্টাইলিংয়ের জন্য কাজ করেছিল।


3

আমি এটি রেডিওর জন্য ব্যবহার করেছি:

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

এইভাবে ত্রুটিটি সর্বশেষ রেডিও বিকল্পের অধীনে প্রদর্শিত হবে।


উজ্জ্বলতার সাথে সহজ উত্তর, ধন্যবাদ - মাত্র আমার বিদ্যমান ত্রুটি প্রতিস্থাপনের যুক্তিতে অতিরিক্ত ধরণের ধারাটি স্লটেড করেছেন
থিয়েটারি

3

আমি জানি এই প্রশ্নটি বুটস্ট্র্যাপ 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
  • রেডিও এবং চেকবাক্সগুলির অবস্থান নির্ধারণের ক্ষেত্রে আরও ভাল

বুটস্ট্র্যাপ 4 এর আর .has-*ক্লাস নেই। getbootstrap.com/docs/4.3/migration/#forms-1
ফ্রেড

2

বুটস্ট্র্যাপের জন্য 4 বিটা ছিল আলফা এবং বুটস্ট্র্যাপের বিটা সংস্করণগুলির মধ্যে কিছু বড় পরিবর্তন (এবং বুটস্ট্র্যাপ 3), এসএসপি e বৈধতা গঠনের ক্ষেত্রে।

প্রথমত, আইকনগুলি সঠিকভাবে স্থাপন করতে আপনাকে স্টাইলিং যুক্ত করতে হবে যা বুটস্ট্র্যাপ 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',

1

এটি ক্ষেত্রগুলি তৈরি করে

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

1

এই 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);
        }
    }
});

এটি সহজ, খুব সহায়ক। ধন্যবাদ.
চৌফোটেডি

0

ডার্ক_ডিজিএলের উত্তর আমার পক্ষে দুর্দান্ত কাজ করেছে; যে কেউ গ্লাইফিকন ব্যবহার করে সমতুল্য চান তার কোড এখানে:

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

0

এই নমুনা কোডটি ব্যবহার করে দেখুন। জ্যাকুরি বৈধতা প্লাগইন এবং অতিরিক্ত পদ্ধতি ব্যবহার করে। এটি আমার প্রকল্পের কাজের কোড। আশা করি এটি আপনাকে সহায়তা করবে

//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>


-1

আরেকটি বিকল্প হ'ল সময়ের আগে আপনার ফর্ম গোষ্ঠীর বাইরে একটি ত্রুটি ধারক রাখবে। যাচকের পরে প্রয়োজনে এটি ব্যবহার করবে।

<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>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.