روبي على القضبان:باستخدام البقدونس القضبان

Question

أحاول التحقق من صحة حقول الإدخال باستخدام Parsely.لقد اكتشفت أنه إذا قمت بإضافة <form data-parsley-validate> ... </form> لا يعمل أي من الأزرار الخاصة بي لذا لا أستطيع التنقل (تابع إلى الصفحة التالية).

إذن هذا مثال على ما لدي، وكل ما أود فعله هو جعله مطلوبًا، وفي نطاق 100-350.

<form data-parsley-validate>
  <ol>
<li>
  <p>
    <div class="measure_question">
          <b>Weight</b><i>(pounds):</i>
        </div> 
    <div class="measure_answer">
          <%= text_field(:baseline, :base_weight, :style => "width:100px;") %>
        </div> 
  </p>
</li>    
  </ol>
</form>

أي مساعدة سيكون موضع تقدير كبير.لقد قمت بالفعل بتثبيت الجوهرة، وأعتقد أنني بحاجة فقط إلى معرفة كيفية جعلها تتفاعل مع الواجهة الأمامية.

يحرر.إرشادات بسيطة لتشغيل Parsley-Rails، مع مثال واحد.

لقد ابتعدت عن هذا المشروع لفترة قصيرة، ثم عدت وأكملته.كنت أرغب في تقديم دليل بسرعة من شأنه أن يجعل بارسلي يعمل في القضبان لأي شخص آخر يحتاج إلى إجابة سريعة.

الخطوة 1: تشمل جوهرة "البقدونس القضبان".تأكد من تشغيل أمر الحزمة الخاص بك.

الخطوة 2: قم بتضمين ملف CSS التالي، وهو مجرد رمز بداية لعرض الأخطاء/النجاحات.

الأصول/أوراق الأنماط/custom.css.scss

/* Parsley */

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px 0;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in-;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

الخطوه 3: أضف "التحقق من صحة البيانات - البقدونس" إلى النماذج الخاصة بك.

قبل:

<%= form_for @your_form do |f| %>

بعد:

<%= form_for @your_form, html: {"data-parsley-validate" => ''} do |f| %>

الخطوة 4: اجعل بعض الحقول مطلوبة.

<%= text_field(:your_table, :weight_variable, :style => "width:100px;", :required => '') %>

وهذا كل شيء.آمل أن يساعد هذا شخصًا آخر في المستقبل.

Answer 1

أفترض أنك تستخدم أحدث إصدار من جوهرة "parsley-rails"، وأنك تطلب وجود البقدونس في ملف بيان خط أنابيب الأصول الخاص بك، كما هو موضح في التعليمات.

أولاً، تحتاج إلى إضافة "data-parsley-validate" إلى كل نموذج، كما فعلت.أنا أستخدم form_for، وكان بناء الجملة الذي نجح معي هو:

<%= form_for @user, html: { 'data-parsley-validate' => '' } do |f| %>

بالنسبة للحقول التي تريد التحقق من صحتها، فإن أدوات التحقق المضمنة يعد قسم الوثائق مفيدًا ليوضح لك التقنيات المختلفة للتحقق من الصحة.يمكنك استخدام أداة التحقق من صحة "النطاق" للتحقق من أن القيم تقع ضمن نطاق معين.

يدعم Parsley.js بعض سمات HTML5 مثل "مطلوب" بالإضافة إلى قائمته الخاصة.فيما يلي مثال لكيفية التحقق من وجود حقل نص "الاسم" وطوله حرفين على الأقل، مما يؤدي إلى التحقق من الصحة عند التمويه:

<%= f.text_field :name, required: true, 'data-parsley-minlength' => '2', 'data-parsley-trigger' => 'blur' %>

تستخدم خيارات التشغيل jQuery، ويتم إدراج بناء الجملة في قسم "واجهة المستخدم للحقل" في المستندات.

وأخيرًا، وجدت أنه من المفيد التحقق من أمثلة المقدمة على موقع Parsley.js.تأكد من أن HTML الذي تم إنشاؤه يطابق بناء الجملة الخاص به إذا كنت لا ترى السلوك المطلوب.