Kartın altındaki Kaydet düğmesi formun dışındayken HTML doğrulaması nasıl korunur?

Bir ayar kartında alanlar ortada, Kaydet düğmesi ise kartın ayrı bir alt bölümünde durabiliyor. Düğmeyi formun dışına taşıyınca tıklama boşa gidiyorsa HTML'deki form niteliğiyle düğmenin hangi formu göndereceğini belirtebilirsiniz.

Bu örneği boş bir HTML dosyasına koyup tarayıcıda açın.

<form id="teslim" method="get">
<label>Teslim kodu <input name="kod" required></label>
</form>
<footer>
<button type="submit" form="teslim">Kaydet</button>
</footer>

İlk denemede alanı boş bırakıp Kaydet'e basın. Tarayıcı giriş ister. İkinci denemede A17 yazıp gönderin. Adresin sorgu kısmında kod=A17 görünür. Böylece hem doğrulamayı hem de doğru form verisinin gönderildiğini kontrol etmiş olursunuz.

Düğme tepki vermiyorsa iki ayrıntıya bakın. form="teslim" içindeki değer formun id değeriyle birebir eşleşmeli ve başında # bulunmamalı. Aynı karttan iki tane üretiyorsanız her forma ayrı bir id verip her düğmeyi kendi formuna bağlayın.

Güzel örnek, bu yöntemi şablonlardaki yönetici panellerinde çok kullandım; özellikle sayfanın altındaki sabit çubukta duran Kaydet düğmesi formun dışında kaldığında işe yarıyor. Bir iki noktayı ekleyeyim: düğmenin type="submit" olması şart, yoksa form niteliği olsa bile gönderim ve doğrulama çalışmıyor. Bir de JavaScript ile gönderim yapacaksanız form.submit() doğrulamayı atlıyor, requestSubmit() kullanmanız gerekiyor; yoksa required alanlar boşken bile form gidiyor. Ayrıca formun id değeri sayfada tek olmalı, aynı şablonu iki kez yükleyen sayfalarda kopya id yüzünden düğme yanlış forma bağlanabiliyor.