Javascript Form Doğrulama

Javascript form doğrulama

Hepimiz projeler geliştiriyoruz. Projelerimizde iletişim, yorum bırakma vb. form alanları oluyor. Örneğin bir iletişim formumuz var. Kullanıcı bizimle iletişime geçmek için bu formu doldurmak zorunda. Bu formda kullanıcıdan adı, mail adresi ve mesajını istiyoruz. Eğer kullanıcı mail adresi yerine başka bir şey yazmaya çalışırsa onu engellememiz gerekecektir. Bu yüzde Javascript form doğrulama bizim için kaçınılmaz oluyor. Bu yazımızda size bunu nasıl yapabileceğinizi anlatacağım. Kodun tamamını en aşağıda bulabilirsiniz.

Örneğin bir kayıt olma formumuz var bu formda kullanıcıdan isim, mail adresi ve şifre isteyeceğiz. Öncelikle gerekli HTML-CSS kodlarımızı yazarak başlayalım.

HTML Kodları

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;"><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <script defer src="./index.js"></script>
</head>
<body>
    <div class="container">
        <form id="form" action="/">
            <h1>Registration</h1>
            <div class="input-control">
                <label for="username">Username</label>
                <input id="username" name="username" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="email">Email</label>
                <input id="email" name="email" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password">Password</label>
                <input id="password"name="password" type="password">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password2">Password again</label>
                <input id="password2"name="password2" type="password">
                <div class="error"></div>
            </div>
            <button type="submit">Sign Up</button>
        </form>
    </div>
</body>
</html>

Bu kodlarla birlikte bir kayıt formu oluşturduk. Formda 4 adet input alanı oluşturduk. Bunlar kullanıcı adı, mail adresi, şifre ve ikinci defa tekrar şifre. Bir adette kayıt ol butonumuz yer alıyor. Bunu daha göze hitap eder hâle getirmek için CSS kodlarımızı yazıyoruz.

CSS

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

#form h1 {
    color: #0f2027;
    text-align: center;
}

#form button {
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color: rgb(41, 57, 194);
    border: none;
    border-radius: 4px;
}

.input-control {
    display: flex;
    flex-direction: column;
}

.input-control input {
    border: 2px solid #f0f0f0;
	border-radius: 4px;
	display: block;
	font-size: 12px;
	padding: 10px;
	width: 100%;
}

.input-control input:focus {
    outline: 0;
}

.input-control.success input {
    border-color: #09c372;
}

.input-control.error input {
    border-color: #ff3860;
}

.input-control .error {
    color: #ff3860;
    font-size: 9px;
    height: 13px;
}

Konumuz tasarım olmadığı için çok fazla üstünde durmayacağım. Bu kodlarla birlikte formumuz görsellik kazandı.

Javascript

Öncelikle kullanacağımız yerleri değişken olarak tanımlamamız gerek.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

Daha sonra formu direkt olarak göndermek yerine onaylayacak bir işlev oluşturuyoruz.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">form.addEventListener('submit', e => {
    e.preventDefault();

    validateInputs();
});

Daha sonrasında giriş denemelerinin hatalı veya başarılı olması durumunda çalışacak işlevleri tanımlıyoruz.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};

Daha sonra mail adresi için nelerin kullanılabileceğini belirleyip tüm harfleri küçülteceğiz. Bunu aşağıdaki kodlarla yapabiliriz.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">const isValidEmail = email => {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

Şimdiyse doğrulayıcı işlevini oluşturacağız. Boş değerlerin olmamasını sağlayacağız. Bunun için şu kodları yazıyoruz. 

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">
const validateInputs = () => {
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if(usernameValue === '') {
        setError(username, 'Username is required');
    } else {
        setSuccess(username);
    }

Daha sonra mail adresi alanının doldurulup doldurulmadığını kontrol edeceğiz. Ve birde geçerli olup olmadığını kontrol etmeliyiz. Eğer bu iki kriteri karşılıyorsa başarılı yanıtını alacaktır.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">
    if(emailValue === '') {
        setError(email, 'Email is required');
    } else if (!isValidEmail(emailValue)) {
        setError(email, 'Provide a valid email address');
    } else {
        setSuccess(email);
    }

Aynı şekilde şifreyi kontrol edeceğiz. Ve en az 8 karakterden oluşmasını sağlayacağız.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">
    if(passwordValue === '') {
        setError(password, 'Password is required');
    } else if (passwordValue.length < 8 ) {
        setError(password, 'Password must be at least 8 character.')
    } else {
        setSuccess(password);
    }

İkinci şifre input alanının boş olmamasını sağlayacağız. Buna ek olarak bu şifrenin ilk şifre ile aynı olmasını sağlayacağız.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">
    if(password2Value === '') {
        setError(password2, 'Please confirm your password');
    } else if (password2Value !== passwordValue) {
        setError(password2, "Passwords doesn't match");
    } else {
        setSuccess(password2);
    }

};

Bu şekilde kodlarımızı bitiriyoruz. Son olarak formu denemek isterseniz aşağıdaki linklerden ulaşabilirsiniz.

A Pen by javascriptacademy (codepen.io)

Web Geliştiriciler için En İyi Chrome Eklentileri: Gizli Yardımcılar

CSS Değişken Kullanımı

Yorum yapın

Kod10 ile yazılım öğrenin!

Sitemizdeki son içerikleri inceleyin, eğitim içerikleriyle kendinizi geliştirin. Tavsiyelerimizle programlama bilginizi üst seviyeye taşıyın!

İletişime geç

© 2024 Kod10

Gizlilik Politikası