JavaScript ile Form Doğrulaması (Eklenti)

JavaScript ile Form Doğrulaması (Eklenti) yapma, girilen alanların boş vb. olup olmadığını ekstra kod kullanmadan kontrol edebilirsiniz.

Form Doğrulama paketi, farklı biçimleri destekleyen üç klasörden oluşur.

Amd klasörü, requirejs ile kullanılabilecek dosyalar içeriyorsa:

const { formValidation } = require('/path/to/@form-validation/amd/bundle/popular');

Cjs klasörü, ES6 modülleriyle kullanılabilecek dosyalar içeriyorsa:

import { formValidation } from '/path/to/@form-validation/cjs/bundle/popular';

Esm klasörü <script type=module> etiketiyle kullanılabilecek dosyalar içeriyorsa:

<script type="module">
   import { formValidation } from '/path/to/@form-validation/esm/bundle/popular.min.js';
</script>

Umd klasörü, genel komut dosyaları olarak kullanılabilecek dosyalar içeriyorsa:

<script src="/path/to/@form-validation/umd/bundle/popular.min.js"></script>

Daha sonra genel Form Doğrulama değişkeninden form Doğrulama özelliğine erişebilirsiniz. Her format aşağıdaki gibi aynı klasör yapılarına sahiptir:

├── bundle
|   ├── full(.min).js
|   └── popular(.min).js
|
├── core
|   └── index(.min).js
|
├── locales
│   ├── de_DE(.min).js
│   ├── en_US(.min).js
│   └── ...
|
├── plugin-[plugin-name]
|   └── index(.min).js
|
├── styles
|   └── index(.min).css
|
└── validator-[validator-name]
  └── index(.min).js

Kitaplığın CSS ve JavaScript dosyalarını head ve body etiketlerinin bitiş etiketinin hemen üstüne ekleyin (önemli dosyaların üstte olması gerekmektedir):

<html>
    <head>
        <link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
    </head>
    <body>
        <!-- Your form goes here -->
        ...
        <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
        <script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
    </body>
</html>

Form yazma ve doğrulayıcı kuralları bildirme

Kitaplık, name özniteliğinin değerinden alınan bir alan için doğrulayıcının tanımlanmasına izin verir. Aşağıdaki kod, oturum açma formunun temel bir örneğidir:

<html>
    <head>
        <link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
    </head>
    <body>
        <form id="loginForm" method="POST">
            <div>
                <label>Username</label>
                <input type="text" name="username" />
            </div>

            <div>
                <label>Password</label>
                <input type="password" name="password" />
            </div>

            <button type="submit">Submit</button>
        </form>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
        <script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function (e) {
                FormValidation.formValidation(document.getElementById('loginForm'), {
                    fields: {
                        username: {
                            validators: {
                                notEmpty: {
                                    message: 'The username is required',
                                },
                                stringLength: {
                                    min: 6,
                                    max: 30,
                                    message: 'The username must be more than 6 and less than 30 characters long',
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z0-9_]+$/,
                                    message: 'The username can only consist of alphabetical, number and underscore',
                                },
                            },
                        },
                        password: {
                            validators: {
                                notEmpty: {
                                    message: 'The password is required',
                                },
                                stringLength: {
                                    min: 8,
                                    message: 'The password must have at least 8 characters',
                                },
                            },
                        },
                    },
                });
            });
        </script>
    </body>
</html>

Doğrulamaların gerçekleşmesi için bazı eklentileri kullanmak zorundayız:

EKLENTIAÇIKLAMA
MessageHer doğrulayıcı seçeneğinde tanımlanan hata iletisini görüntüle.
TriggerDoğrulamanın gerçekleştirileceği olayları belirt.
SumbitButtonGönder düğmesine basarken formu otomatik olarak doğrula.
DefaultSumbitDoğrulamadan sonra tüm alanlar geçerliyse formu gönder (Ajax isteği kullanabilirsiniz).

Daha fazla örnek için aşağıya göz atabilirsiniz:

https://formvalidation.io/guide/examples/