نحوه ریست کردن ولیدیشن input

Question

سلام

استاد در این جلسه در رابطه موضوع ولیدیشن فرم ها صحبت کردند که یک قسمت داره که اگر یک فیلد خالی گذاشته بشه یک پیغام نمایش بده حالا من امدم یک تگ P جای alert اضافه کردم و از طریق display شرط گذاشتم که اگر یک متن داخل فیلد نوشت display اون رو none بکن و این مورد کار میکنه ولی فقط یک بار اگر نوشت و این متن مورد نظر من none شد و مجدد امد متن رو پاک کرد دیگه اون تگ P من نمایش داده نمیشه چطور میتونم این مورد رو برای هر بار که متن هم که پاک میشه تگ P رو مجدد نمایش بدم ؟

کدی که من نوشتم در قسمت :validation NOT empty قرار دارد

<!DOCTYPE html>
<html>

<head>
    <title>جاوا اسکریپت</title>
    <style>
        form {
            border: 3px dotted brown;
            padding: 10px;
            margin: 45px;
        }

        div {
            border: 2px dashed red;
            padding: 5px;
        }

        p {
            border: 2px solid gray;
            padding: 5px;
        }

        body {
            line-height: 25px;
            font-size: 16px;
        }
    </style>
</head>

<body style="text-align: center;">
    <h1>سلام به همه دانشجویان عزیز و برنامه‌نویسان حرفه‌ای آینده</h1>
    <hr />

    <form id="firstForm">FORM
        <div>DIV
            <p>P</p>
        </div>
    </form>

    <form id="test2" name="secondForm">
        <p id="error">inpit is empty</p>
        <input data-validation="notEmpty" type=" text" name="family">
        <select name="list">
            <option value="city1">تهران</option>
            <option value="city2">اصفهان</option>
            <option value="city3">شیراز</option>
        </select>
        <button type="submit">ذخیره</button>
    </form>

    <script>
        'use strict';
        class formValidator2 {
            constructor(elems, autofocusElem) {
                this.__elems = elems;
                this.focusHandler();
                autofocusElem.focus();
            }
            focusHandler() {
                this.__elems.addEventListener('focusin', function (event) {
                    console.log("focusin on :")
                    console.log(event.target)

                })
                this.__elems.addEventListener('focusout', (event) => {
                    console.log("focusout on :")
                    console.log(event.target)
                    this[event.target.dataset.validation](event.target);
                });
            }
            // validation NOT  empty
            notEmpty(elem) {

                if (elem.value.length == 0) {
                    document.getElementById("error").style.display = " "
                } else if {
                    document.getElementById("error").style.display = " none"

                }
            }
        }

        new formValidator2(secondForm, secondForm.elements.family);

    </script>
</body>

</html>

جاوااسکریپت

مهدی محمدی زاده

17 فروردین 00

Answer 1

حذف شده

سلام

اگر درست متوجه سوالی که پرسیده شده باشم مشکل از خط ۷۴

document.getElementById("error").style.display = " "

میتونی تغییرش بدی و به صورت زیر بنویسی

document.getElementById("error").style.display = "block"

اگر مشکل مورد دیگه ای بود اعلام بکن که بیشتر بررسی بشه

توسط

مجتبی سوری

19 فروردین 00

Answer 2

حذف شده

ممنون مجتبی جان

علاوه بر تغییری که شما گفتی، بهتره داخل تابع مربوط به ایونت focusin هم تابع مرتبط با ولیدیشن را صدا بزنن

یک شرط هم اضافه کنن که مطمئن بشن تابع مرتبط با ولیدیشن نوشته شده وجود داره یا نه در واقع چک بشه آیا event.target.dataset.validation معادل اسم تابعی در کلاس فعلی (در this) است یا خیر؟ و خطای احتمالی را هم هندل کنن

از طرفی این ولیدیشن وقتی عمل میکنه که ایونت های focusin یا focusout اتفاق بیافته و اگر بخوان بلافاصله بعد از پاک کردن فیلد، خطا ظاهر بشه بهتره روی رویدادهای دیگه مثل onchange هم listener بذارن

توسط

مهرداد دادخواه

20 فروردین 00

نحوه ریست کردن ولیدیشن input

سوالات مرتبط