বুটস্ট্র্যাপ ব্যবহার করে ফর্মটিতে ত্রুটি চিহ্নিত করুন

Question

জিডাব্লুটিটি অবলম্বন না করে একটি সুন্দর পৃষ্ঠা নকশা অর্জন করার জন্য আমি বুটস্ট্র্যাপ ব্যবহার শুরু করেছি (ব্যাকএন্ডটি জাভাতে তৈরি হয়)

আমার লগইন স্ক্রিনের জন্য আমি এই উদাহরণটি অনুলিপি করেছি । এখন আমি একটি ত্রুটি চিহ্নিত করতে চাই, উদাহরণস্বরূপ, ব্যবহারকারীর নামটি ফাঁকা রেখে গেছে। তাই আমি ভাবছিলাম যে এটির জন্য বুটস্ট্র্যাপ কাঠামোর পদ্ধতিটি কী। বা হতে পারে যদি সেখানে ভুল উদাহরণ সহ ফর্মটি দেখায়।

আমি নিশ্চিত নই যে ধারণাটি কোনও লাল রঙের সাথে ইনপুট উপাদানটির ভিতরে ত্রুটি বার্তাটি দেখানো, বা এটি ইনপুট উপাদানটির নীচে, বা কোনও পপআপ সহ প্রদর্শিত হবে?

Comments

চেকআউট jquery বৈধ। এটা মোটামুটি সহজ। bassistance.de/jquery-plugins/jquery-plugin- માન્યকরণ

— স্কট সিম্পসন

Answer 1

(বুটস্ট্র্যাপ v4, v3 এবং v3 এর উদাহরণ সহ আপডেট করা)

বুটস্ট্র্যাপের বিগত কয়েকটি বড় সংস্করণের জন্য বৈধতা শ্রেণীর সাথে ফর্মের উদাহরণ।

বুটস্ট্র্যাপ ভি 4

কোডেপেনে লাইভ সংস্করণ দেখুন

<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
      <div class="col-sm-7">
        <input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
      </div>
    </div>

    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
      <div class="col-sm-7">
        <input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
      </div>
      <div class="col-sm-3">
        <small id="passwordHelp" class="text-danger">
          Must be 8-20 characters long.
        </small>      
      </div>
    </div>
  </form>
</div>

বুটস্ট্র্যাপ ভি 3

কোডেপেনে লাইভ সংস্করণ দেখুন

<form role="form">
  <div class="form-group has-warning">
    <label class="control-label" for="inputWarning">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning">
    <span class="help-block">Something may have gone wrong</span>
  </div>
  <div class="form-group has-error">
    <label class="control-label" for="inputError">Input with error</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Please correct the error</span>
  </div>
  <div class="form-group has-info">
    <label class="control-label" for="inputError">Input with info</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Username is taken</span>
  </div>
  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess" />
    <span class="help-block">Woohoo!</span>
  </div>
</form>

বুটস্ট্র্যাপ ভি 2

Jsfiddle এ লাইভ সংস্করণ দেখুন

.error, .success, .warningএবং .infoক্লাস অ্যাপেন্ড হয় .control-group। এটি স্ট্যান্ডার্ড বুটস্ট্র্যাপ মার্কআপ এবং v2-এ স্টাইলিং। কেবল এটি অনুসরণ করুন এবং আপনি ভাল অবস্থায় আছেন। আপনি যদি পছন্দ করেন তবে পপআপ বা "ইনলাইন ফ্ল্যাশ" যুক্ত করতে নিজের স্টাইলগুলি ছাড়িয়ে যেতে পারেন, তবে আপনি যদি বুটস্ট্র্যাপ কনভেনশনটি অনুসরণ করেন এবং সেইগুলিতে এই বৈধকরণের ক্লাসগুলি ঝুলিয়ে রাখেন তবে .control-groupএটি সামঞ্জস্যপূর্ণ এবং পরিচালনা করা সহজ (অন্তত আপনি যেহেতু ' বুটস্ট্র্যাপ ডক্স এবং উদাহরণগুলির সুবিধা অবিরত থাকবে)

  <form class="form-horizontal">
    <div class="control-group warning">
      <label class="control-label" for="inputWarning">Input with warning</label>
      <div class="controls">
        <input type="text" id="inputWarning">
        <span class="help-inline">Something may have gone wrong</span>
      </div>
    </div>
    <div class="control-group error">
      <label class="control-label" for="inputError">Input with error</label>
      <div class="controls">
        <input type="text" id="inputError">
        <span class="help-inline">Please correct the error</span>
      </div>
    </div>
    <div class="control-group info">
      <label class="control-label" for="inputInfo">Input with info</label>
      <div class="controls">
        <input type="text" id="inputInfo">
        <span class="help-inline">Username is taken</span>
      </div>
    </div>
    <div class="control-group success">
      <label class="control-label" for="inputSuccess">Input with success</label>
      <div class="controls">
        <input type="text" id="inputSuccess">
        <span class="help-inline">Woohoo!</span>
      </div>
    </div>
  </form>

Comments

নোট করুন যে বুটস্ট্র্যাপ 3 এর সাথে আপনাকে পরিবর্তন control-groupকরতে হবে form-group, উপাদানগুলিতে যোগ form-controlকরতে হবে , এবং করতে হবে । <input>help-inlinehelp-blockwarninghas-warning

— জিম স্টুয়ার্ট

@ জিমস্টেয়ার্ট আপনাকে ধন্যবাদ! জানার জন্য দুর্দান্ত। আমি সুযোগ পাওয়ার সাথে সাথে আপডেট করব

— jonschlinkert

এটি বুটস্ট্র্যাপ ভি 3 এ পরিবর্তন করা হয়েছে,

— ওয়াকার আলমগীর

বুটস্ট্র্যাপ 3 হ'ল-ত্রুটির মতো বিভিন্ন ক্লাস ব্যবহার করে। দয়া করে getbootstrap.com/css

— নিশ

যেমন বুটস্ট্রা.আইপি 3 ডকুমেন্টেশনে উল্লিখিত হয়েছে: বুটস্ট্র্যাপে ত্রুটি, সতর্কতা এবং ফর্ম নিয়ন্ত্রণগুলিতে সাফল্যের জন্য বৈধতা শৈলী অন্তর্ভুক্ত রয়েছে। ব্যবহার করতে, পিতামণ্ডলের উপাদানটিতে। যে উপাদানগুলির মধ্যে কোনও নিয়ন্ত্রণ-লেবেল, .ফর্ম-নিয়ন্ত্রণ এবং .হেল্প-ব্লক

— নেজমেডাইন জামেলি

Answer 2

বুটস্ট্র্যাপ ভি 3 :

অফিসিয়াল ডক লিঙ্ক 1
অফিসিয়াল ডক লিঙ্ক 2

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess" />
  <span class="help-block">Woohoo!</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning">
  <span class="help-block">Something may have gone wrong</span>
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
  <span class="help-block">Please correct the error</span>
</div>

Comments

একটি ভি 3 উত্তর পাওয়া দুর্দান্ত তবে এটিতে ত্রুটি বার্তা অন্তর্ভুক্ত নয়।

— ডেভ

ধন্যবাদ @ ডেভ কিন্তু আপনার পরামর্শটি অন্যরা প্রত্যাখ্যান করেছিল, আমি উত্তরটি আপডেট করেছি।

— ওয়াকার আলমগীর

আপনার ডেমো লিঙ্কটি আপনার পোস্ট করা কোডটি প্রদর্শন করে না।

— অজয়

এটি নির্দেশ করার জন্য @ayjay ধন্যবাদ, দুর্ভাগ্যক্রমে তাদের কাছে সহায়তা ব্লক যুক্ত করার জন্য পৃথক নথি রয়েছে। উত্তর আপডেট করেছেন।

— ওয়াকার আলমগীর

@fsasvari গ্রিড সিস্টেমটি এর মতো ব্যবহার করুন: <ডি ক্লাস = "ফর্ম-গোষ্ঠীটির সাফল্য"> <স্প্যান শ্রেণি = "কল-এসএম -12"> <লেবেল শ্রেণি = "নিয়ন্ত্রণ-লেবেল" = "ইনপুটস্যাক্সেস ১"> এর সাথে ইনপুট সাফল্য </ span> <span class = "col-sm-6"> <ইনপুট টাইপ = "পাঠ্য" আরিয়া-বর্ণিত = "সহায়তাব্লক 2" আইডি = "ইনপুটসুস 1" শ্রেণি = "ফর্ম-নিয়ন্ত্রণ"> </ span> <span class = "col-sm-6"> <span id = "helpBlock2" class = "help-block"> সহায়তা পাঠ্যের একটি ব্লক যা একটি নতুন লাইনে বিভক্ত। </ span> </span> < / div>

— ওয়াকার আলমগীর

Answer 3

বুটস্ট্র্যাপ মডেল ক্লাস (v 3.3.7) ব্যবহার করার সময় কেউ নিম্নলিখিত ক্লাসটিও ব্যবহার করতে পারেন ... হেল্প-ইনলাইন এবং হেল্প-ব্লক মডেলটিতে কাজ করে না।

<span class="error text-danger">Some Errors related to something</span>

আউটপুট নীচের কিছু মত দেখাচ্ছে:

Answer 4

বুটস্ট্র্যাপ ভি 3:

একবার আমি লারাভেল বৈশিষ্ট্যগুলি অনুসন্ধান করেছিলাম তখন আমি এই আশ্চর্যজনক ফর্মটির বৈধতাটি জানতে পারি। পরে, আমি গ্লাইফিকন আইকন বৈশিষ্ট্যগুলি সংশোধন করেছি। এখন, দুর্দান্ত দেখাচ্ছে।

<div class="col-md-12">
<div class="form-group has-error has-feedback">
    <input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>       
    <span class="help-block"><p>The Email field is required.</p></span>                                        
</div>
</div>
<div class="clearfix"></div>

<div class="col-md-6">
<div class="form-group has-error has-feedback">
    <input id="account_holder_name" name="name" type="text" placeholder="Name" class="form-control ">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>                                            
    <span class="help-block"><p>The Name field is required.</p></span>                                        
</div>
</div>
<div class="col-md-6">
<div class="form-group has-error has-feedback">
 <input id="check_np" name="check_no" type="text" placeholder="Check no" class="form-control ">
 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Check No. field is required.</p></span>                                       
</div>
</div>

এটি দেখতে এটির মতো:

একবার এটি সম্পন্ন করার পরে আমি ভেবেছিলাম আমার কোডিগিটারেও এটি প্রয়োগ করা উচিত। সুতরাং বুটস্ট্র্যাপের সাথে কোডিগিটার -3 বৈধতা এখানে রয়েছে:

নিয়ামক

function addData()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('email','Email','trim|required|valid_email|max_length[128]');
if($this->form_validation->run() == FALSE)
{
//validation fails. Load your view.
$this->loadViews('Load your view','pass your data to view if any');
}
else
{  
 //validation pass. Your code here.
}
}

দৃশ্য

<div class="col-md-12">
<?php 
 $email_error = (form_error('email') ? 'has-error has-feedback' : '');
 if(!empty($email_error)){
 $emailData = '<span class="help-block">'.form_error('email').'</span>';
 $emailClass = $email_error;
 $emailIcon = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
}
else{
    $emailClass = $emailIcon = $emailData = '';
 } 
 ?>
<div class="form-group <?= $emailClass ?>">
<input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
<?= $emailIcon ?>
<?= $emailData ?>
</div>
</div>

আউটপুট:

Answer 5

সাধারণত ত্রুটি যেখানে ঘটে ততক্ষণে ত্রুটিটি প্রদর্শন করা ভাল। উদাহরণস্বরূপ, কারও ইমেল প্রবেশের ক্ষেত্রে যদি ত্রুটি থাকে তবে আপনি ইমেল ইনপুট বক্সটি হাইলাইট করেন।

এই নিবন্ধটির বেশ কয়েকটি ভাল উদাহরণ রয়েছে। http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

টুইটার বুটস্ট্র্যাপে কিছু দুর্দান্ত স্টাইল রয়েছে যা এটির সাথে সহায়তা করে (বৈধকরণের রাজ্যে বিভাগে স্ক্রোল করুন) http://twitter.github.com/bootstrap/base-css.html#forms

প্রতিটি ইনপুট বাক্স হাইলাইট করা কিছুটা জটিল, সুতরাং সহজ উপায়টি হ'ল কেবল ব্যবহারকারীরা কী কী ভুল করেছে তার বিশদ সহ শীর্ষে একটি বুটস্ট্র্যাপ সতর্কতা রেখে দেওয়া। http://twitter.github.com/bootstrap/components.html#alerts

Answer 6

বুটস্ট্র্যাপ v4 এর জন্য: র‌্যাপারের
has-dangerজন্য form-group,
form-control-dangerআইকনটি দেখানোর জন্য ইনপুটটির জন্য (ইনপুটটির শেষে display প্রদর্শিত হবে),
form-control-feedbackবার্তা র‌্যাপারে

উদাহরণ:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


<div class="form-group has-danger">
  <input type="text" class="form-control form-control-danger">
  <div class="form-control-feedback">Not valid :(</div>
</div>

Answer 7

কেবল ত্রুটিতে ত্রুটি বার্তা প্রদর্শন করতে সিএসএস ব্যবহার করতে পারেন।

.form-group.has-error .help-block {
    display: block;
}

.form-group .help-block {
    display: none;
}


<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
  <span class="help-block">Please correct the error</span>
</div>