Magento 2 - Validasi Formulir

32

apakah ada ikhtisar untuk atribut validasi formulir baru di Magento 2?

magento2 form-validation ClassMP
sumber

Jawaban:

37

Anda dapat menambahkan kelas untuk validasi di Magento 2. Lihat contoh di bawah. Ada hampir 72 aturan (kelas validasi) yang dapat Anda gunakan:

$fieldset->addField(
    'email_from',
    'text',
    ['name' => 'email_from', 'label' => __('Email From'), 'title' => __('Email From'), 'required' => true, 'class' => 'validate-email']
);

Lihat blog untuk daftar aturan yang tersedia untuk info lebih lanjut:

Berikut adalah daftar aturan kelas validasi yang didukung oleh magento 2. Anda hanya perlu menambahkan kelas css agar aturan dapat diterapkan.

min_text_length
max_text_length
max-words
min-words
range-words
letters-with-basic-punc
alphanumeric
letters-only
no-whitespace
zip-range
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
stripped-min-length
email2
url2
credit-card-types
ipv4
ipv6
pattern
validate-no-html-tags
validate-select
validate-no-empty
validate-alphanum-with-spaces
validate-data
validate-street
validate-phoneStrict
validate-phoneLax
validate-fax
validate-email
validate-emailSender
validate-password
validate-admin-password
validate-url
validate-clean-url
validate-xml-identifier
validate-ssn
validate-zip-us
validate-date-au
validate-currency-dollar
validate-not-negative-number
validate-zero-or-greater
validate-greater-than-zero
validate-css-length
validate-number
validate-number-range
validate-digits
validate-digits-range
validate-range
validate-alpha
validate-code
validate-alphanum
validate-date
validate-identifier
validate-zip-international
validate-state
less-than-equals-to
greater-than-equals-to
validate-emails
validate-cc-number
validate-cc-ukss
required-entry
checked
not-negative-amount
validate-per-page-value-list
validate-new-password
validate-item-quantity
equalTo
nikunj Gandhi
sumber
2
apakah ada contoh cara menggunakan pola? tnx
Antonio Pedicini
35

Ada 3 cara berbeda untuk menggunakan validasi formulir di magento 2

Untuk mengaktifkan validasi javascript, gunakan kode berikut di templat Anda

<form class="form" id="custom-form" method="post" autocomplete="off">
 <fieldset class="fieldset">
     <legend class="legend"><span><?php echo __('Personal Information') ?></span></legend><br>
      <div class="field required">
          <label for="email_address" class="label"><span><?php echo __('Email') ?></span></label>
          <div class="control">
              <input type="email" name="email" id="email_address" value="" title="<?php echo __('Email') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
          </div>
      </div>
 </fieldset>
 <div class="actions-toolbar">
      <div class="primary">
          <button type="submit" class="action submit primary" title="<?php  echo __('Submit') ?>"><span><?php echo __('Submit') ?></span></button>
      </div>
  </div>
</form>

1

<script type="text/x-magento-init">
    {
        "#custom-form": {
            "validation": {}
        }
    }
</script>

2

<form data-mage-init='{"validation": {}}' class="form" id="custom-form" method="post" autocomplete="off">

3

<script type="text/javascript">
require([
    'jquery',
    'mage/mage'
], function($){

   var dataForm = $('#custom-form');
   dataForm.mage('validation', {});

});
</script>

* custom-form adalah id formulir yang dapat Anda ganti dengan id formulir Anda

Daftar aturan validasi formulir

Untuk mengakhiri artikel ini, daftar nama aturan validasi disediakan di sini sebagai referensi cepat menuju dokumentasi resmi:

Aturan Magento:

validate-no-html-tags

validate-select

validate-no-empty

validate-alphanum-with-spaces

validate-data

validate-street

validate-phoneStrict

validate-phoneLax

validate-fax

validate-email

validate-emailSender

validate-password

validate-admin-password

validate-customer-password

validate-url

validate-clean-url

validate-xml-identifier

validate-ssn

validate-zip-us

validate-date-au

validate-currency-dollar

validate-not-negative-number

validate-zero-or-greater

validate-greater-than-zero

validate-css-length

validate-number

required-number

validate-number-range

validate-digits

validate-digits-range

validate-range

validate-alpha

validate-code

validate-alphanum

validate-date

validate-date-range

validate-cpassword

validate-identifier

validate-zip-international

validate-one-required

validate-state

required-file

validate-ajax-error

validate-optional-datetime

validate-required-datetime

validate-one-required-by-name

less-than-equals-to

greater-than-equals-to

validate-emails

validate-cc-type-select

validate-cc-number

validate-cc-type

validate-cc-exp

validate-cc-cvn

validate-cc-ukss

validate-length

required-entry

not-negative-amount

validate-per-page-value-list

validate-per-page-value

validate-new-password

required-if-not-specified

required-if-all-sku-empty-and-file-not-loaded

required-if-specified

required-number-if-specified

datetime-validation

required-text-swatch-entry

required-visual-swatch-entry

required-dropdown-attribute-entry

Validate-item-quantity

validate-grouped-qty

validate-one-checkbox-required-by-name

validate-date-between

validate-dob

max-words

min-words

range-words

letters-with-basic-punc

alphanumeric

letters-only

no-whitespace

zip-range

integer

vinUS

dateITA

dateNL

time

time12h

phoneUS

phoneUK

mobileUK

stripped-min-length

email2

url2

credit-card-types

ipv4

ipv6

pattern

allow-container-className

Aturan jQuery:

required,

remote,

email,

url,

date,

dateISO,

number,

digits,

creditcard,

equalTo,

maxlength,

minlength,

rangelength,

range,

max,

min

lihat http://inchoo.net/magento-2/validate-custom-form-in-magento-2/

Vaibhav Ahalpara
sumber
Saya ingin menerapkan validasi sisi server di magento 2bisa tolong bagikan tautan atau dokumen apa pun kepada saya,
Khushbu_sipl
Saya pikir Anda sudah mengajukan pertanyaan di sini magento.stackexchange.com/questions/161300/... Semoga tautan ini membantu lainnya
Vaibhav Ahalpara
9

Dalam komponen UI dapat digunakan dengan mengikuti konfigurasi sampel (Magento v2.2.0):

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general">
        <field name="priority" sortOrder="1000" formElement="input">
            <settings>
                <validation>
                    <rule name="not-negative-amount" xsi:type="boolean">true</rule>
                </validation>
                [...]
            </settings>
        </field>
    </fieldset>
</form>

Lihat lebih banyak contoh dalam file:
vendor/magento/module-cms/view/adminhtml/ui_component/cms_page_form.xml

Daftar validator di Komponen UI dapat ditemukan di
vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js.

Baru saja menulis skrip ini untuk mengambil semua kunci dengan pesan kesalahan untuk penjelasan:

  • wajib masuk:
    Ini adalah bidang wajib.
  • validate-alphanum-with-spasi:
    Harap gunakan hanya huruf (az atau AZ), angka (0-9) atau spasi hanya di bidang ini.
  • phoneUK:
    Silakan tentukan nomor telepon yang valid
  • validate-email:
    Silakan masukkan alamat email yang valid (Contoh: [email protected]).
  • ipv4:
    Silakan masukkan alamat IP v4 yang valid.
  • dicentang:
    Ini adalah bidang wajib diisi.
  • validate-select:
    Silakan pilih satu opsi.
  • ipv6:
    Silakan masukkan alamat IP v6 yang valid.
  • waktu:
    Silakan masukkan waktu yang valid, antara pukul 00:00 dan 23:59
  • validate-number:
    Silakan masukkan nomor yang valid di bidang ini.
  • validate-phoneLax:
    Silakan masukkan nomor telepon yang valid. Misalnya (123) 456-7890 atau 123-456-7890.
  • dateITA:
    Silakan masukkan tanggal yang benar
  • validate-xml-identifier:
    Silakan masukkan pengidentifikasi XML yang valid (Mis: something_1, block5, id-4).
  • validate-clean-url:
    Silakan masukkan URL yang valid. Misalnya http://www.example.com atau www.example.com.
  • validate-admin-password:
    Silakan masukkan 7 karakter atau lebih, menggunakan numerik dan alfabet.
  • validate-no-html-tag:
    Tag HTML tidak diizinkan.
  • validate-integer:
    Silakan masukkan bilangan bulat yang valid di bidang ini.
  • validate-data:
    Harap gunakan hanya huruf (az atau AZ), angka (0-9) atau garis bawah (_) di bidang ini, dan karakter pertama harus berupa huruf.
  • validate-cc-ukss:
    Silakan masukkan nomor masalah atau tanggal mulai untuk jenis kartu beralih / solo
  • min-kata:
    Silakan masukkan setidaknya {0} kata.
  • alfanumerik:
    Tolong huruf, angka, spasi atau garis bawah
  • validate-identifier:
    Silakan masukkan Kunci URL yang valid (Contoh: "contoh-halaman", "contoh-halaman.html" atau "anotherlevel / example-page").
  • validate-street:
    Silakan gunakan hanya huruf (az atau AZ), angka (0-9), spasi dan "#" di bidang ini.
  • validate-zip-international:
    Silakan masukkan kode pos yang valid.
  • validate-date:
    Silakan masukkan tanggal yang valid.
  • validate-better-than-zero:
    Silakan masukkan angka yang lebih besar dari 0 di bidang ini.
  • validate-digit:
    Silakan masukkan nomor yang valid di bidang ini.
  • validate-ssn:
    Silakan masukkan nomor jaminan sosial yang valid (Contoh: 123-45-6789).
  • tidak-negatif-jumlah:
    Silakan masukkan angka positif di bidang ini.
  • validate-max-size:
    File yang Anda coba unggah melebihi batas ukuran file maksimum.
  • validate-fax:
    Silakan masukkan nomor faks yang valid (Contoh: 123-456-7890).
  • validate-if-tag-script-exist:
    Silakan gunakan tag SCRIPT dengan atribut SRC atau dengan konten yang tepat untuk memasukkan JavaScript ke dokumen.
  • min_text_length:
    Silakan masukkan lebih dari atau sama dengan simbol {0}.
  • validate-date-au:
    Silakan gunakan format tanggal ini: dd / mm / yyyy. Misalnya 17/03/2006 untuk 17 Maret 2006.
  • mobileUK:
    Silakan tentukan nomor ponsel yang valid
  • letters-with-basic-punc: Tolong
    huruf atau tanda baca saja
  • validate-number-range:
    Nilai tidak dalam kisaran yang ditentukan.
  • phoneUS:
    Silakan tentukan nomor telepon yang valid
  • date_range_max:
    Tanggal tidak dalam kisaran yang ditentukan.
  • validate-range:
    Nilai tidak dalam kisaran yang ditentukan.
  • vinUS:
    Nomor identifikasi kendaraan yang ditentukan (VIN) tidak valid.
  • range-words:
    Silakan masukkan antara {0} dan {1} kata.
  • validate-zip-us:
    Silakan masukkan kode pos yang valid (Mis: 90602 atau 90602-1234).
  • validate-email:
    Silakan masukkan alamat email yang valid, pisahkan dengan koma. Misalnya, [email protected], [email protected].
  • validate-css-length:
    Silakan masukkan panjang CSS yang valid (Mis: 100px, 77pt, 20em, .5ex atau 50%).
  • zip-range:
    Kode ZIP Anda harus berada dalam kisaran 902xx-xxxx hingga 905-xx-xxxx
  • validate-phoneStrict:
    Silakan masukkan nomor telepon yang valid. Misalnya (123) 456-7890 atau 123-456-7890.
  • dateNL:
    Vul hier een geldige datum di.
  • hanya
    huruf : harap hanya huruf
  • max_text_length:
    Silakan masukkan kurang dari atau sama dengan {0} simbol.
  • validate-not-negative-number:
    Silakan masukkan angka 0 atau lebih besar di bidang ini.
  • validate-per-halaman-nilai-daftar:
    Silakan masukkan nilai yang valid, mis .: 10,20,30
  • no-whitespace:
    Tolong, jangan spasi kosong
  • validate-state:
    Silakan pilih Negara Bagian / Provinsi.
  • validate-url:
    Silakan masukkan URL yang valid. Diperlukan protokol (http: //, https: // atau ftp: //).
  • date_range_min:
    Tanggal tidak dalam kisaran yang ditentukan.
  • validate-digit-range:
    Nilai tidak dalam kisaran yang ditentukan.
  • lebih besar dari sama dengan-untuk:
    Silakan masukkan nilai lebih besar dari atau sama dengan {0}.
  • validate-no-empty:
    Nilai Kosong.
  • validate-nol-atau-lebih besar:
    Silakan masukkan angka 0 atau lebih besar di bidang ini.
  • validate-cc-number:
    Silakan masukkan nomor kartu kredit yang valid.
  • validate-emailSender:
    Silakan masukkan alamat email yang valid (Contoh: [email protected]).
  • validate-new-password:
    Silakan masukkan 6 karakter atau lebih. Ruang depan dan belakang akan diabaikan.
  • validate-customer-password:
    Panjang minimum bidang ini harus sama atau lebih besar dari simbol% ​​1. Ruang depan dan belakang akan diabaikan.
  • validate-password:
    Silakan masukkan 6 karakter atau lebih. Ruang depan dan belakang akan diabaikan.
  • less-than-equals-to:
    Silakan masukkan nilai kurang dari atau sama dengan {0}.
  • validate-currency-dollar:
    Silakan masukkan jumlah $ yang valid. Misalnya $ 100,00.
  • time12h:
    Silakan masukkan waktu yang valid, antara pukul 00:00 dan 12:00 siang
  • validate-alphanum:
    Harap gunakan hanya huruf (az atau AZ) atau angka (0-9) di bidang ini. Tidak ada spasi atau karakter lain yang diizinkan.
  • validasi-item-kuantitas:
    Kami tidak mengenali atau mendukung jenis ekstensi file ini.
  • validate-code:
    Harap gunakan hanya huruf (az), angka (0-9) atau garis bawah (_) di bidang ini, dan karakter pertama harus berupa huruf.
  • email2:
    Silakan masukkan nomor kartu kredit yang valid.
  • maks-kata:
    Silakan masukkan {0} kata atau kurang.
  • stripped-min-length:
    Silakan masukkan setidaknya {0} karakter
  • validate-alpha:
    Silakan gunakan huruf saja (az atau AZ) di bidang ini.
  • pola:
    Format tidak valid.
  • bilangan bulat:
    Angka non-desimal positif atau negatif

Naskah:

declare -A list
key=''
while IFS= read -r line; do
#  echo "${line} -"
  if [ -z "${key:-}" ]; then
    # match validation key
    match=$(echo "${line}" | grep -Eo "^        ['\"]([A-Za-z0-9-]|_)+" | tr -d "' ")
    if [ -n "${match}" ]; then
      key=${match}
    fi
  else
    # match message
    match=$(echo "${line}" | sed -rn "s|.*\\$\.mage\.__[(]['\"](.*)['\"][)].*|\1|p")
    if [ -n "${match}" ]; then
      list[${key}]=${match}
      key=''
    fi
  fi
done < "${DOCROOT_DIR:-/var/www/html}/vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js"

for i in "${!list[@]}"
do
  printf "%s:\n    %s\n" "${i}" "${list[$i]}"
done
Kirby
sumber
3

Jika Anda mengambil referensi dari / pelanggan / akun / buat halaman, Anda dapat melihat potongan kode berikut di bawah formulir:

<script>
require([
    'jquery',
    'mage/mage'
], function($){

    var dataForm = $('#form-validate');
    var ignore = null;

    dataForm.mage('validation', {
            ignore: ignore ? ':hidden:not(' + ignore + ')' : ':hidden'
        }).find('input:text').attr('autocomplete', 'off');

});
</script>

Dan jika Anda memeriksa atribut input formulir, Anda bisa melihat classnilai atribut seperti Magento 1 bersama dengan data-validateatribut baru . Ini bisa menjadi dasar untuk melangkah.

File kunci untuk Validasi:

MagePsycho
sumber
Terima kasih untuk jawabannya. Saya menemukan validasi data atribut baru juga, tetapi menarik validasi apa yang tersedia. Dalam kasus saya, saya ingin memvalidasi Kotak Centang dan satu set RadioButton
ClassMP
Saya ingin menerapkan validasi sisi server di Magento 2, bisakah Anda bagikan tautan atau dokumen apa pun kepada saya.
Khushbu_sipl
2

Ketika menggunakan komponen UI untuk membuat formulir, kita bisa menggunakan validasi seperti di bawah ini, ini berfungsi di Magento 2.1.x, saya belum mengujinya di versi lain.

<field name="priority">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Priority</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">module_name</item>
            <item name="dataScope" xsi:type="string">priority</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
                <item name="validate-integer" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Perhatikan item validasi , di dalamnya kita bisa menambahkan aturan validasi , seperti required-entry, validate-integerdll.

<item name="validation" xsi:type="array">
     <item name="required-entry" xsi:type="boolean">true</item>
     <item name="validate-integer" xsi:type="boolean">true</item>
     <item name="validation_rule_name" xsi:type="boolean">true</item>
     ...
</item>

Semua aturan validasi dapat Anda temukan dalam file vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js, seperti validate-date, validate-emailsdll.

Key Shang
sumber
1

Saya memiliki persyaratan yang sama untuk Validasi Formulir Magento2 dan saya melakukan kode ini

Pertama kita akan menyiapkan formulir tes

<!-- form tag -->
<form class="form" id="custom-form-id" method="post" autocomplete="off">
   <fieldset class="fieldset">
       <legend class="legend"><span><?php echo __('User Personal Information') ?></span></legend><br>
        <div class="field required">
            <!-- form field -->
            <label for="email_address" class="label"><span><?php echo __('Email') ?></span></label>
            <div class="control">
                <input type="email" name="email" id="email_address" value="" title="<?php echo __('Email') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
            </div>
        </div>
   </fieldset>
   <!-- submit button -->
   <div class="actions-toolbar">
        <div class="primary">
            <button type="submit" class="action submit primary" title="<?php  echo __('Submit') ?>"><span><?php echo __('Submit') ?></span></button>
        </div>
    </div>
</form>

Untuk mengaktifkan validasi javascript untuk Validasi Formulir Magento2

<!-- enable javascript validation for custom-form-id -->
<script type="text/x-magento-init">
    {
        "#custom-form-id": {
            "validation": {}
        }
    }
</script>

Referensi :: http://www.onlinecode.org/magento2-form-validation-example/

Dhaval Dave
sumber
0

Opsi "no-whitespace" tidak berfungsi dengan benar (setidaknya di Magento 2.1). Ini memicu pesan kesalahan pada semua jenis karakter "spasi". Nilai "test me" dan "test me" akan mengembalikan kesalahan yang sama.

Stanislav Spuzyak
sumber