VueJS ile bir iki haftada bitirmek üzere başladığım bir yan projemde Bootstrap-vue kullanıyorum. Burada karşılaştığım bir validation sorununu nasıl aştığımı kısaca belirteyim.

Sorun şu; formda iki alan zorunlu iken diğer üç alan zorunlu değil. Formdaki submit butonuna tıklanınca bütün form validate ediliyor ve hatalı alanlar kırmızı ile, hata olmayanlar yeşil ile belirtiliyor. İşte bu yeşil olanlar zaten zorunlu olmayan alanlar. Bunların yeşil görünmelerini istemiyordum.

Bootstrap dökümanında yazdığı üzere form elemanlarını validate edebilmek için başlangıçta bunları kapsayan bir öğeye (mesela form öğesine) .novalidate class’ı eklemek gerekiyor. Validate işlemi olunca bu öğe yakalanıp buna .was-validated class’ı ekleniyor ve bunun altındaki bütün alanlar duruma göre kırmızı ve yeşile boyanıyor.

Aslında sorunumun çözümü yukarıdaki paragrafta yatıyor. Stackoverflow’da okuduğum şu cevabı (Ludovico Fischer) ilk başta anlamamıştım. Sonra dikkatlice okuyunca çözümü anladım.

Ben .novalidate ve .was-validated classlarını en tepeye, form’a veriyordum. Haliyle altındaki bütün alanlar etkileniyordu. Halbuki form’a vermek şart değil. Validation’dan geçmesini istediğimiz öğeleri kapsayacak şekilde bir div‘e bile bu class’lar verilebilir. Nitekim ben de öyle yapıp sorunu çözdüm.