فرم‌ها و اعتبارسنجی در جاوااسکریپت

بهنام نوبخت · ۱۴۰۵/۷/۱۱

فرم‌ها یکی از مهم‌ترین بخش‌های بسیاری از وب‌سایت‌ها و برنامه‌های تحت وب هستند. تقریباً در هر پروژه‌ای با فرم‌هایی مانند فرم ورود، ثبت‌نام، تماس با ما، جستجو، ثبت سفارش، ایجاد حساب کاربری و ویرایش اطلاعات مواجه می‌شویم.

HTML به ما اجازه می‌دهد فرم و کنترل‌های ورودی مانند input، select، textarea و button را ایجاد کنیم؛ اما برای اینکه بتوانیم اطلاعات واردشده توسط کاربر را دریافت و بررسی کنیم، به جاوااسکریپت نیاز داریم.

در این مقاله یاد می‌گیریم چگونه:

Form چیست؟

در HTML برای دریافت اطلاعات از کاربر از عنصر form استفاده می‌کنیم.

یک فرم ساده:

<form id="registerForm">

    <input
        type="text"
        id="firstName"
        placeholder="First Name"
    >

    <input
        type="text"
        id="lastName"
        placeholder="Last Name"
    >

    <button type="submit">
        Register
    </button>

</form>

در اینجا یک فرم داریم که شامل دو Input و یک Button است.

دریافت فرم با جاوااسکریپت

می‌توانیم فرم را با getElementById() پیدا کنیم:

const form =
    document.getElementById("registerForm");

console.log(form);

یا با querySelector():

const form =
    document.querySelector("#registerForm");

Event مربوط به Submit

وقتی کاربر روی دکمه Submit کلیک کند، فرم ارسال می‌شود.

برای مدیریت این اتفاق می‌توانیم از Event:

submit

استفاده کنیم.

مثال:

const form =
    document.getElementById("registerForm");

form.addEventListener(
    "submit",
    function (event) {

        console.log("Form submitted");

    }
);

جلوگیری از ارسال پیش‌فرض فرم

در حالت عادی، مرورگر هنگام Submit ممکن است فرم را ارسال کرده و صفحه را Reload کند.

اگر بخواهیم اطلاعات را ابتدا با جاوااسکریپت بررسی کنیم، معمولاً از:

event.preventDefault();

استفاده می‌کنیم.

مثال:

form.addEventListener(
    "submit",
    function (event) {

        event.preventDefault();

        console.log("Form handled by JavaScript");

    }
);

اکنون فرم به شکل پیش‌فرض ارسال نمی‌شود.

دریافت مقدار Input

فرض کنید:

<input
    type="text"
    id="username"
>

می‌توانیم آن را پیدا کنیم:

const username =
    document.getElementById("username");

مقدار واردشده توسط کاربر در ویژگی:

username.value

قرار دارد.

مثلاً:

console.log(username.value);

مثال ساده

HTML:

<input
    type="text"
    id="name"
    placeholder="Enter your name"
>

<button id="showButton">
    Show
</button>

<p id="result"></p>

جاوااسکریپت:

const nameInput =
    document.getElementById("name");

const button =
    document.getElementById("showButton");

const result =
    document.getElementById("result");

button.addEventListener(
    "click",
    function () {

        result.textContent =
            nameInput.value;

    }
);

هر چیزی که کاربر وارد کند، با کلیک روی Button در p نمایش داده می‌شود.

بررسی خالی بودن Input

یکی از اولین اعتبارسنجی‌هایی که معمولاً انجام می‌دهیم، بررسی خالی بودن Input است.

مثلاً:

if (username.value === "") {
    console.log("Username is required");
}

اما بهتر است فاصله‌های اضافی را نیز در نظر بگیریم.

برای این کار:

if (username.value.trim() === "") {
    console.log("Username is required");
}

استفاده می‌کنیم.

چرا trim مهم است؟

فرض کنید کاربر فقط Space وارد کند:

"     "

این مقدار از نظر ظاهری خالی به نظر می‌رسد، اما:

value === ""

برای آن false خواهد بود.

با:

value.trim() === ""

تمام فاصله‌های ابتدا و انتها حذف شده و نتیجه خالی می‌شود.

اعتبارسنجی طول متن

می‌توانیم طول مقدار را با:

value.length

بررسی کنیم.

مثلاً:

if (username.value.length < 3) {
    console.log("Username is too short");
}

یا:

if (username.value.length > 20) {
    console.log("Username is too long");
}

اعتبارسنجی چند شرط

می‌توانیم چند شرط را با هم ترکیب کنیم:

const value =
    username.value.trim();

if (value === "") {

    console.log("Username is required");

} else if (value.length < 3) {

    console.log(
        "Username must contain at least 3 characters"
    );

} else {

    console.log("Username is valid");

}

اعتبارسنجی ایمیل

برای بررسی ایمیل روش‌های مختلفی وجود دارد.

یکی از روش‌ها استفاده از Regular Expression است که در مقاله بعدی به صورت تخصصی بررسی خواهد شد.

برای مثال ساده:

const email =
    document.getElementById("email");

if (!email.value.includes("@")) {
    console.log("Invalid email");
}

این روش فقط یک بررسی ساده است و برای اعتبارسنجی کامل ایمیل کافی نیست.

اعتبارسنجی رمز عبور

فرض کنید:

<input type="password" id="password">

می‌توانیم حداقل طول رمز را بررسی کنیم:

const password =
    document.getElementById("password");

if (password.value.length < 8) {
    console.log(
        "Password must contain at least 8 characters"
    );
}

این فقط یک بررسی سمت کاربر است.

اعتبارسنجی سمت Client جایگزین اعتبارسنجی سمت Server نیست.

در یک برنامه واقعی، اطلاعات باید در سمت سرور نیز بررسی و اعتبارسنجی شوند.

نمایش پیام خطا در صفحه

به جای اینکه خطا را فقط در Console نمایش دهیم، بهتر است آن را به کاربر نشان دهیم.

HTML:

<p id="usernameError"></p>

جاوااسکریپت:

const usernameError =
    document.getElementById("usernameError");

usernameError.textContent =
    "Username is required";

ایجاد یک فرم ساده با پیام خطا

HTML:

<form id="registerForm">

    <input type="text" id="username" placeholder="Username">

    <p id="usernameError"></p>

    <button type="submit">
        Register
    </button>

</form>

جاوااسکریپت:

const form =
    document.getElementById("registerForm");

const username =
    document.getElementById("username");

const usernameError =
    document.getElementById("usernameError");

form.addEventListener(
    "submit",
    function (event) {

        event.preventDefault();

        usernameError.textContent = "";

        if (username.value.trim() === "") {

            usernameError.textContent =
                "Username is required";

            return;
        }

        console.log("Form is valid");

    }
);

استفاده از return در اعتبارسنجی

در مثال قبلی:

if (username.value.trim() === "") {

    usernameError.textContent =
        "Username is required";

    return;
}

اگر مقدار خالی باشد، return باعث می‌شود اجرای ادامه تابع متوقف شود.

این روش باعث می‌شود ساختار اعتبارسنجی خواناتر شود.

اعتبارسنجی چند Input

فرض کنید فرم ثبت‌نام شامل:

First Name
Last Name
Email
Password

باشد.

HTML:

<form id="registerForm">

    <input type="text" id="firstName" placeholder="First Name">

    <input type="text" id="lastName" placeholder="Last Name">

    <input type="email" id="email" placeholder="Email">

    <input type="password" id="password" placeholder="Password">

    <button type="submit">
        Register
    </button>

</form>

می‌توانیم همه عناصر را دریافت کنیم:

const form =
    document.getElementById("registerForm");

const firstName =
    document.getElementById("firstName");

const lastName =
    document.getElementById("lastName");

const email =
    document.getElementById("email");

const password =
    document.getElementById("password");

اعتبارسنجی مرحله‌به‌مرحله

form.addEventListener(
    "submit",
    function (event) {

        event.preventDefault();

        if (firstName.value.trim() === "") {

            console.log(
                "First name is required"
            );

            return;
        }

        if (lastName.value.trim() === "") {

            console.log(
                "Last name is required"
            );

            return;
        }

        if (email.value.trim() === "") {

            console.log(
                "Email is required"
            );

            return;
        }

        if (password.value.length < 8) {

            console.log(
                "Password is too short"
            );

            return;
        }

        console.log("Form is valid");

    }
);

در این روش اولین خطایی که پیدا شود نمایش داده شده و ادامه بررسی متوقف می‌شود.

ایجاد تابع اعتبارسنجی

اگر فرم بزرگ باشد، بهتر است همه کدها را داخل یک تابع قرار دهیم.

مثلاً:

function validateForm() {

    if (firstName.value.trim() === "") {
        return false;
    }

    if (lastName.value.trim() === "") {
        return false;
    }

    if (email.value.trim() === "") {
        return false;
    }

    if (password.value.length < 8) {
        return false;
    }

    return true;
}

سپس:

form.addEventListener(
    "submit",
    function (event) {

        event.preventDefault();

        if (!validateForm()) {
            return;
        }

        console.log("Form is valid");

    }
);

بازگرداندن true و false

تابع اعتبارسنجی معمولاً می‌تواند:

true

برای معتبر بودن و:

false

برای نامعتبر بودن برگرداند.

مثلاً:

function isValidUsername(username) {

    if (username.trim() === "") {
        return false;
    }

    if (username.length < 3) {
        return false;
    }

    return true;
}

استفاده:

if (isValidUsername(username.value)) {
    console.log("Valid");
} else {
    console.log("Invalid");
}

تغییر ظاهر Input در صورت خطا

می‌توانیم در صورت خطا یک کلاس CSS به Input اضافه کنیم.

HTML:

<input id="username" type="text">

جاوااسکریپت:

username.classList.add("error");

و اگر معتبر بود:

username.classList.remove("error");

در CSS می‌توانیم مثلاً چنین کلاسی داشته باشیم:

.error {
    border: 1px solid red;
}

نمایش خطا و تغییر Border

مثال:

if (username.value.trim() === "") {

    username.classList.add("error");

    usernameError.textContent =
        "Username is required";

} else {

    username.classList.remove("error");

    usernameError.textContent = "";

}

بررسی Checkbox

فرض کنید:

<input type="checkbox" id="terms">

<label for="terms">
    I accept the terms
</label>

می‌توانیم وضعیت آن را با:

terms.checked

بررسی کنیم.

مثلاً:

const terms =
    document.getElementById("terms");

if (!terms.checked) {
    console.log(
        "You must accept the terms"
    );
}

بررسی Select

فرض کنید:

<select id="country">

    <option value="">
        Select country
    </option>

    <option value="tr">
        Türkiye
    </option>

    <option value="ir">
        Iran
    </option>

</select>

مقدار انتخاب‌شده:

const country =
    document.getElementById("country");

console.log(country.value);

اگر کاربر Türkiye را انتخاب کند:

tr

برگردانده می‌شود.

برای بررسی انتخاب شدن:

if (country.value === "") {
    console.log(
        "Please select a country"
    );
}

دریافت مقدار Textarea

برای textarea نیز مانند Input از .value استفاده می‌کنیم.

HTML:

<textarea id="message" placeholder="Your message">
</textarea>

جاوااسکریپت:

const message =
    document.getElementById("message");

console.log(message.value);

بررسی حداقل طول پیام

if (message.value.trim().length < 10) {

    console.log(
        "Message must contain at least 10 characters"
    );

}

اعتبارسنجی هنگام تایپ

لازم نیست همیشه تا زمان Submit صبر کنیم.

می‌توانیم هنگام تایپ کاربر مقدار را بررسی کنیم:

username.addEventListener(
    "input",
    function () {

        if (username.value.length < 3) {

            usernameError.textContent =
                "Username is too short";

        } else {

            usernameError.textContent = "";

        }

    }
);

اکنون پیام خطا همزمان با تایپ کاربر تغییر می‌کند.

اعتبارسنجی هنگام خارج شدن از Input

می‌توانیم از Event:

blur

استفاده کنیم.

مثلاً:

username.addEventListener(
    "blur",
    function () {

        if (username.value.trim() === "") {

            usernameError.textContent =
                "Username is required";

        }

    }
);

Event blur زمانی رخ می‌دهد که Input تمرکز خود را از دست بدهد.

focus چیست؟

Event:

focus

زمانی اتفاق می‌افتد که کاربر وارد یک کنترل شود یا آن را فعال کند.

مثلاً:

username.addEventListener(
    "focus",
    function () {

        console.log(
            "Username input focused"
        );

    }
);

ترکیب focus و blur

می‌توانیم هنگام ورود کاربر به Input ظاهر آن را تغییر دهیم:

username.addEventListener(
    "focus",
    function () {

        username.classList.add("focused");

    }
);

و هنگام خروج:

username.addEventListener(
    "blur",
    function () {

        username.classList.remove("focused");

    }
);

استفاده از ویژگی‌های HTML برای Validation

HTML خودش نیز قابلیت‌های اعتبارسنجی دارد.

مثلاً:

<input type="email" required>

یا:

<input type="text" minlength="3" maxlength="20">

یا:

<input type="number" min="1" max="100">

این قابلیت‌ها می‌توانند بخشی از اعتبارسنجی فرم را انجام دهند.

ویژگی required

اگر Input دارای:

required

باشد، مرورگر اجازه Submit فرم را در حالت خالی نمی‌دهد.

مثلاً:

<input type="text" id="username" required>

ویژگی minlength

<input type="text" minlength="3">

حداقل تعداد کاراکتر را مشخص می‌کند.

ویژگی maxlength

<input type="text" maxlength="20">

حداکثر تعداد کاراکتر را مشخص می‌کند.

ویژگی type="email"

مثلاً:

<input type="email" id="email">

مرورگر می‌تواند بررسی‌های پایه مربوط به ساختار Email را انجام دهد.

بررسی validity

عناصر فرم دارای ویژگی مهمی به نام:

validity

هستند.

مثلاً:

if (email.validity.valid) {
    console.log("Email is valid");
}

همچنین:

if (email.validity.valueMissing) {
    console.log("Email is required");
}

یا:

if (email.validity.typeMismatch) {
    console.log("Invalid email format");
}

متد checkValidity

می‌توانیم بررسی کنیم که یک عنصر از نظر Validation معتبر است یا خیر:

if (email.checkValidity()) {
    console.log("Valid");
}

متد reportValidity

برای نمایش پیام Validation مرورگر می‌توانیم از:

email.reportValidity();

استفاده کنیم.

متد فرم و checkValidity

خود فرم نیز می‌تواند بررسی شود:

if (form.checkValidity()) {
    console.log("Form is valid");
}

و:

form.reportValidity();

می‌تواند پیام‌های اعتبارسنجی مرورگر را نمایش دهد.

FormData چیست؟

یکی دیگر از ابزارهای مفید برای کار با فرم:

FormData

است.

فرض کنید:

<form id="registerForm">

    <input
        name="username"
        type="text"
    >

    <input
        name="email"
        type="email"
    >

    <button type="submit">
        Register
    </button>

</form>

می‌توانیم هنگام Submit:

form.addEventListener(
    "submit",
    function (event) {

        event.preventDefault();

        const formData =
            new FormData(form);

        console.log(formData);

    }
);

دریافت مقدار از FormData

برای دریافت مقدار یک فیلد:

const username =
    formData.get("username");

console.log(username);

و:

const email =
    formData.get("email");

console.log(email);

نامی که در FormData.get() استفاده می‌کنیم باید با Attribute مربوط به name در HTML هماهنگ باشد.

تبدیل FormData به Object

در بسیاری از موارد می‌توانیم اطلاعات را به یک Object ساده تبدیل کنیم:

const formData =
    new FormData(form);

const data =
    Object.fromEntries(formData);

console.log(data);

مثلاً ممکن است نتیجه چیزی شبیه این باشد:

{
    username: "ali",
    email: "ali@example.com"
}

این روش در زمان ارسال اطلاعات فرم به API بسیار کاربردی خواهد بود.

مثال کامل: فرم ثبت‌نام

HTML:

<form id="registerForm">

    <div>
        <label for="firstName">
            First Name
        </label>

        <input
            type="text"
            id="firstName"
            name="firstName"
            required
            minlength="2"
        >

        <p id="firstNameError"></p>
    </div>

    <div>
        <label for="lastName">
            Last Name
        </label>

        <input
            type="text"
            id="lastName"
            name="lastName"
            required
            minlength="2"
        >

        <p id="lastNameError"></p>
    </div>

    <div>
        <label for="email">
            Email
        </label>

        <input
            type="email"
            id="email"
            name="email"
            required
        >

        <p id="emailError"></p>
    </div>

    <div>
        <label for="password">
            Password
        </label>

        <input
            type="password"
            id="password"
            name="password"
            required
            minlength="8"
        >

        <p id="passwordError"></p>
    </div>

    <div>
        <input
            type="checkbox"
            id="terms"
            name="terms"
        >

        <label for="terms">
            I accept the terms
        </label>

        <p id="termsError"></p>
    </div>

    <button type="submit">
        Register
    </button>

    <p id="successMessage"></p>

</form>

جاوااسکریپت:

const form =
    document.getElementById("registerForm");

const firstName =
    document.getElementById("firstName");

const lastName =
    document.getElementById("lastName");

const email =
    document.getElementById("email");

const password =
    document.getElementById("password");

const terms =
    document.getElementById("terms");

const firstNameError =
    document.getElementById("firstNameError");

const lastNameError =
    document.getElementById("lastNameError");

const emailError =
    document.getElementById("emailError");

const passwordError =
    document.getElementById("passwordError");

const termsError =
    document.getElementById("termsError");

const successMessage =
    document.getElementById("successMessage");

form.addEventListener(
    "submit",
    function (event) {

        event.preventDefault();

        firstNameError.textContent = "";
        lastNameError.textContent = "";
        emailError.textContent = "";
        passwordError.textContent = "";
        termsError.textContent = "";
        successMessage.textContent = "";

        let isValid = true;

        if (firstName.value.trim() === "") {

            firstNameError.textContent =
                "First name is required";

            isValid = false;
        }

        if (lastName.value.trim() === "") {

            lastNameError.textContent =
                "Last name is required";

            isValid = false;
        }

        if (email.value.trim() === "") {

            emailError.textContent =
                "Email is required";

            isValid = false;

        } else if (!email.validity.valid) {

            emailError.textContent =
                "Please enter a valid email";

            isValid = false;
        }

        if (password.value.length < 8) {

            passwordError.textContent =
                "Password must contain at least 8 characters";

            isValid = false;
        }

        if (!terms.checked) {

            termsError.textContent =
                "You must accept the terms";

            isValid = false;
        }

        if (!isValid) {
            return;
        }

        const formData =
            new FormData(form);

        const data =
            Object.fromEntries(formData);

        console.log(data);

        successMessage.textContent =
            "Registration form is valid.";

    }
);

این مثال بسیاری از مفاهیمی را که در این مقاله یاد گرفتیم با یکدیگر ترکیب می‌کند.

یک نکته مهم درباره اعتبارسنجی

اعتبارسنجی جاوااسکریپت در مرورگر امنیت واقعی برنامه را تضمین نمی‌کند.

کاربر می‌تواند جاوااسکریپت مرورگر را تغییر دهد، غیرفعال کند یا مستقیماً به API درخواست ارسال کند.

بنابراین اگر مثلاً فرم ثبت‌نام داریم، باید اطلاعات در سمت سرور نیز بررسی شوند.

به صورت ساده:

Browser
   ↓
Client Validation
   ↓
Server
   ↓
Server Validation
   ↓
Database

اعتبارسنجی Client برای تجربه کاربری بهتر بسیار مفید است، اما Validation سمت Server برای امنیت و صحت داده‌ها ضروری است.

اشتباهات رایج در فرم‌ها

اشتباه اول: استفاده نکردن از preventDefault

اگر قصد داریم فرم را با جاوااسکریپت مدیریت کنیم:

event.preventDefault();

را در زمان مناسب فراموش نکنیم.

اشتباه دوم: استفاده از innerHTML برای پیام کاربر

اگر پیام فقط متن است، بهتر است:

error.textContent = message;

استفاده شود.

نه اینکه ورودی غیرقابل اعتماد را مستقیماً با:

error.innerHTML = message;

قرار دهیم.

اشتباه سوم: بررسی نکردن trim

این کد:

if (input.value === "")

ممکن است مقدارهایی شامل فقط Space را معتبر در نظر بگیرد.

بهتر است:

if (input.value.trim() === "")

استفاده شود.

اشتباه چهارم: اعتماد کامل به Validation مرورگر

required، minlength و سایر ویژگی‌های HTML بسیار مفید هستند، اما نباید آن‌ها را جایگزین Validation سمت Server کنیم.

اشتباه پنجم: نگهداری رمز عبور در سمت Client

نباید تصور کنیم که چون مقدار Password در جاوااسکریپت قرار دارد، امن است.

اطلاعات حساس باید با معماری صحیح و ارتباط امن به Server منتقل شوند و پردازش رمز عبور باید در سمت Server انجام شود.

تمرین‌ها

تمرین ۱

یک فرم ساده ایجاد کنید که شامل:

Name
Email
Password
Submit

باشد.

اگر هرکدام خالی بود، پیام خطا نمایش دهید.

تمرین ۲

برای Username شرط‌های زیر را ایجاد کنید:

خالی نباشد.
حداقل ۳ کاراکتر داشته باشد.
بیشتر از ۲۰ کاراکتر نباشد.

تمرین ۳

یک Email Input ایجاد کنید و از قابلیت‌های Validation خود HTML برای بررسی آن استفاده کنید.

تمرین ۴

یک Checkbox برای پذیرش قوانین ایجاد کنید.

اگر کاربر آن را انتخاب نکرد، اجازه ادامه فرم را ندهید.

تمرین ۵

یک Select با چند کشور ایجاد کنید.

اگر مقدار پیش‌فرض انتخاب شده بود، پیام خطا نمایش دهید.

تمرین ۶

یک Textarea ایجاد کنید که پیام کاربر حداقل ۲۰ کاراکتر باشد.

تمرین ۷

هنگام تایپ Username، تعداد کاراکترهای واردشده را به صورت لحظه‌ای نمایش دهید.

مثلاً:

Characters: 7

چالش عملی

یک فرم ثبت‌نام کامل ایجاد کنید که شامل موارد زیر باشد:

First Name
Last Name
Username
Email
Password
Confirm Password
Country
Accept Terms
Register

قوانین:

First Name خالی نباشد.
Last Name خالی نباشد.
Username حداقل ۳ کاراکتر داشته باشد.
Email معتبر باشد.
Password حداقل ۸ کاراکتر داشته باشد.
Confirm Password با Password یکسان باشد.
Country انتخاب شده باشد.
Terms انتخاب شده باشد.
برای هر فیلد پیام خطای مناسب نمایش داده شود.
در صورت معتبر بودن تمام اطلاعات، پیام موفقیت نمایش داده شود.

برای بررسی Password و Confirm Password:

if (password.value !== confirmPassword.value) {
    // Passwords do not match
}

هدف این تمرین این است که بتوانید یک فرم واقعی را با ترکیب:

DOM
Event
Function
Condition
String
Form
Validation
classList
FormData

مدیریت کنید.

جمع‌بندی

در این مقاله با فرم‌ها و اعتبارسنجی در جاوااسکریپت آشنا شدیم.

یاد گرفتیم چگونه:

یک Form را با DOM پیدا کنیم.
Event مربوط به submit را مدیریت کنیم.
با preventDefault() از ارسال پیش‌فرض جلوگیری کنیم.
مقدار Input را با .value دریافت کنیم.
از trim() برای بررسی ورودی استفاده کنیم.
طول رشته را بررسی کنیم.
Checkbox را با .checked بررسی کنیم.
مقدار Select را دریافت کنیم.
Textarea را مدیریت کنیم.
با Eventهای input، focus و blur کار کنیم.
پیام خطا در صفحه نمایش دهیم.
با classList ظاهر Input را تغییر دهیم.
از قابلیت‌های Validation خود HTML استفاده کنیم.
validity، checkValidity() و reportValidity() را بشناسیم.
با FormData اطلاعات فرم را جمع‌آوری کنیم.
FormData را به Object تبدیل کنیم.
یک فرم ثبت‌نام کامل ایجاد کنیم.
تفاوت Validation سمت Client و Server را درک کنیم.

اکنون می‌توانیم فرم‌های تعاملی و قابل‌قبولی در سمت کاربر ایجاد کنیم.

۰۰

نظرات

هنوز نظری ثبت نشده است.