Memvalidasi Nilai Kotak Meta Khusus & Bidang yang Diperlukan


16

Sesuatu yang belum pernah saya lihat dibahas adalah cara terbaik untuk memvalidasi bahwa bidang formulir tertentu diisi dengan benar untuk kotak meta jenis pos kustom.

Saya mencari untuk mendapatkan pendapat ahli tentang cara terbaik untuk memvalidasi bidang khusus untuk setiap metabox yang mungkin dibuat. Minat saya adalah:

  • memastikan validasi lapangan dilakukan sebelum posting dipublikasikan / diperbarui
  • menggunakan kelas / kode yang tidak bertentangan dengan javascript wordpress lainnya
  • memungkinkan Anda untuk menentukan bidang-bidang tertentu sebagaimana diperlukan sementara yang lain bisa opsional
  • memvalidasi bidang berdasarkan aturan yang dapat disesuaikan termasuk regex untuk hal-hal seperti format email
  • mengontrol tampilan visual dari segala kesalahan / pemberitahuan

Terima kasih sebelumnya!

Jawaban:


21

Cara termudah adalah menambahkan validasi Javascript melalui plugin jQuery Validate . Inilah langkah-langkah paling mendasar:

Di dekat panggilan add_meta_box Anda, enqueue plugin Validasi jQuery serta file JS untuk skrip sederhana Anda:

add_action('admin_enqueue_scripts', 'add_my_js');   
function add_my_js(){    
  wp_enqueue_script('my_validate', 'path/to/jquery.validate.min.js', array('jquery'));
  wp_enqueue_script('my_script_js', 'path/to/my_script.js');
}

Kemudian di my_script.js sertakan yang berikut:

jQuery().ready(function() {
    jQuery("#post").validate();
});

Ini akan memungkinkan validasi pada formulir posting. Kemudian di callback add_meta_box tempat Anda mendefinisikan bidang khusus, Anda akan menambahkan kelas "wajib" untuk setiap bidang yang ingin Anda validasi, seperti:

<input type="text" name="my_custom_text_field" class="required"/>

Semua bidang dengan "wajib" di kelasnya akan divalidasi ketika pos disimpan / dipublikasikan / diperbarui. Semua opsi validasi lainnya (aturan, gaya kesalahan, dll) dapat diatur dalam dokumen. Sudah berfungsi di my_script.js; periksa jQuery Validate docs untuk semua opsi.


Terima kasih, saya akan mencoba ini besok, tetapi bisakah Anda menjelaskan bagaimana melakukan validasi yang berbeda Misalnya memvalidasi untuk alamat email yang benar, memvalidasi bahwa tidak ada lebih dari atau setidaknya XX karakter, bahwa bidang formulir diisi ... hal-hal seperti itu?
NetConstructor.com

Juga, apakah ini memvalidasi sebelum posting disimpan / diperbarui? Jika tidak, bagaimana saya bisa melakukan itu?
NetConstructor.com

Contoh dan dokumentasi untuk plugin Validasi jQuery (ditautkan dalam jawaban saya) akan menunjukkan kepada Anda bagaimana melakukan semua hal itu. Validasi terjadi saat kirim secara default, tetapi Anda dapat memicunya secara blur atau saat perubahan untuk elemen formulir apa pun untuk bidang khusus Anda.
danblaker

Saya menerapkan solusi ini dan kelihatannya sangat menjanjikan, satu masalah, apa yang saya masukkan ke dalam 'submitHandler'? Setelah validasi dengan jquery.validate, Wordpress tidak melakukan apa-apa (simpan buttun tetap dalam keadaan animasi). Bagaimana saya meneruskan bayi kembali ke WP?
mike23

2
Jika Anda hanya mencoba untuk mengembalikan tombol Publikasikan ke keadaan normal ketika bidang yang diperlukan kosong (atau beberapa validasi lainnya gagal), Anda tidak perlu melakukan apa pun dengan submitHandler; cukup edit kode validate () untuk mengubah tombol ketika validasi gagal. Ini berfungsi: jQuery ("# ​​post"). Validate ({invalidHandler: function () {jQuery ('# publish'). RemoveClass ('button-primary-disabled'); jQuery ('# ajax-loading'). Css ('visibilitas', 'tersembunyi');}});
danblaker

2

Kode Dasar Lengkap untuk menambahkan Validasi jQuery:

  1. Enqueue skrip validasi. Saya menganggap jQuery sudah enqued.

    add_action('admin_enqueue_scripts',function($id){
        $validation',$validation_js_url = #your validation.js source;
        wp_register_script( 'validation',$validation_js_url,array(),'',true );
        wp_enqueue_script( 'validation' );
    });
  2. Dalam file js atau tag script:

    jQuery(document).ready(function($){
        var form = $("form[name='post']");
        $(form).find("input[type='submit']").click(function(e){
            e.preventDefault();
            $(form).validate();
    
            if($(form).valid())
            {
                $("#ajax-loading").show();
                $(form).submit();
            }else{
                $("#publish").removeClass().addClass("button-primary");
                $("#ajax-loading").hide();
            }
        });
    });
  3. Selesai :)


Bagaimana dengan di sisi server?
NetConstructor.com

2

Saya menggunakan kode ini, sangat membantu, baru saja berubah:

$(form).find("input[type='submit']").click(function(e){

Untuk:

$(form).find("#publish").click(function(e){

Karena jika Anda memiliki formulir lain di dalam formulir utama, mulailah skrip ini.

Dan:

$(form).submit();

Untuk:

$(this).submit();

Karena baris pertama hanya menyimpan posting sebagai konsep dan Anda tidak dapat mempublikasikannya lagi.

Menulis semuanya di sini: http://allgraphics.it/blog/2012/10/jquery-validation-sui-campi-di-input-postcustom-post-di-wordpress/


2

Saya menemukan pendekatan ini untuk memecahkan masalah memvalidasi bidang metabox menggunakan kode PHP

https://tommcfarlin.com/post-meta-data-error-messages/

Semoga ini bisa membantu Anda (bekerja untuk saya dalam skenario yang sama)


Meskipun tautan ini dapat menjawab pertanyaan, lebih baik untuk memasukkan bagian-bagian penting dari jawaban di sini dan memberikan tautan untuk referensi. Jawaban hanya tautan dapat menjadi tidak valid jika halaman tertaut berubah.
Gabriel

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.