كتبت كود لعرض اسم المستخدم في صفحة html لكن واجهتني مشكلة إن إذا كان حقل الإدخال فارغ ونقرت على (submit) يضع لي قيمة 0 وفي نفس الوقت يظهر (required)

باستطاعتك تعديل الكود بإضافة شرط قبل تحديث قيمة الـ printName، حيث يتحقق من قيمة حقل الإدخال، وإذا كان فارغًا يتم عرض رسالة (required) دون تحديث قيمة الـ printName، وإذا كانت القيمة غير فارغة يتم تحديث قيمة الـ printName بقيمة حقل الإدخال.

<script>
function myFunction() {
    let userInput = document.querySelector("#userInput");
    let printName = document.querySelector("#printName");
    if (userInput.value === '') {
        userInput.setCustomValidity("Please enter your name");
        printName.innerHTML = '';
    } else {
        userInput.setCustomValidity('');
        printName.innerHTML = userInput.value;
    }
}
</script>

قمت بإضافة userInput.setCustomValidity لتعيين رسالة الخطأ وتعيين قيمة الـ printName إلى فارغ في حالة كان حقل الإدخال فارغًا، وإذا تم إدخال قيمة صالحة، يتم إزالة رسالة الخطأ وتحديث قيمة الـ printName.

المشكلة في الكود هي استخدام علامة "+" بجانب userInput.value، والتي تحول قيمة المدخلات إلى رقم. لحل المشكلة، يمكن إزالة علامة الجمع "+" وتغيير الجملة التالية:

printName.innerHTML = userInput.value;

بالإضافة إلى ذلك، يمكن تحديد قيمة العنصر الناتج عن زر الإرسال submit باستخدام الأحداث المناسبة. يمكنك استخدام event.preventDefault() لإيقاف تقديم النموذج عندما يكون حقل الإدخال فارغًا. يمكنك أيضًا إضافة شرطًا في الدالة للتحقق مما إذا كانت قيمة حقل الإدخال فارغة أم لا.

هنا هو الكود المحدث:

<article>
<form id="form" action="/" method="get">
    <h1>Hello, write your name</h1> <br>
<div class="inputBox">
    <input id="userInput" name="Name" type="text" required> 
    <span>Last Name</span>
    <br>
    <br>
    <input type="submit" onclick="myFunction(event)" required>
    <h1 id="printName"></h1>
</div>
</form>
</article>

<script>
    function myFunction(event) {
        event.preventDefault();

        let userInput = document.querySelector("#userInput");
        let printName = document.querySelector("#printName");

        if (userInput.value.trim() === "") {
            alert("Please enter your name");
            return;
        }

        printName.innerHTML = userInput.value;
    }
</script>

لاحظت أنك قمت بإضافة علامة + قبل قيمة userInput.value في السطر الأخير من الدالة myFunction()، وهذا السبب في ظهور قيمة 0 عند تقديم النموذج بدون قيمة في حقل الإدخال. يمكنك حل هذه المشكلة عن طريق إضافة شرط يتحقق من أن حقل الإدخال ليس فارغًا قبل تعيين قيمته إلى العنصر innerHTML. وبالإضافة إلى ذلك، يمكنك إزالة السطر الذي يحتوي على الدالة myFunction() من زر الإرسال (submit) لأنها لن تحل المشكلة التي واجهتك. ولحل هذه المشكلة يمكنك استخدام الكود التالي:

<article>
    <form id="form" action="/" method="get">
        <h1>Hello, write your name</h1> <br>
        <div class="inputBox">
            <input id="userInput" name="Name" type="text" required> 
            <span>Last Name</span>
            <br>
            <br>
            <button type="submit" required>Submit</button>
            <h1 id="printName"></h1>
        </div>
    </form>
</article>

<script>
    const form = document.querySelector("#form");
    const userInput = document.querySelector("#userInput");
    const printName = document.querySelector("#printName");

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

        if (userInput.value.trim() !== "") {
            printName.innerHTML = userInput.value;
        } else {
            printName.innerHTML = "";
            userInput.setCustomValidity("Please enter your name");
            userInput.reportValidity();
            userInput.focus();
        }
    });
</script>

في هذا الكود، قمت بإضافة مستمع حدث submit إلى النموذج (form) باستخدام الدالة addEventListener()، والتي تتيح لك تنفيذ دالة عند حدوث الحدث. ثم، وضعت الشرط الذي يتحقق من أن حقل الإدخال ليس فارغًا باستخدام الدالة trim() التي تزيل الفراغات العائمة من النص. إذا كان حقل الإدخال غير فارغٍ، ستعيد الدالة قيمة الإدخال إلى العنصر innerHTML، وإذا كان فارغًا، يتم إزالة النص من العنصر innerHTML وتعيين رسالة الخطأ المخصصة (setCustomValidity()) إلى "Please enter your name". ثم يتم استدعاء الدالة reportValidity() ليتم عرض رسالة الخطأ المخصصة، ويتم وضع التركيز على حقل الإدخال باستخدام الدالة focus().

يمكن حل هذه المشكلة بإضافة شرط في الدالة myFunction() يتحقق من قيمة حقل الإدخال، وإذا كان فارغاً يعرض رسالة "required" دون إظهار قيمة الصفر. يمكن استخدام الدالة trim() لحذف أي مسافات فارغة في بداية أو نهاية النص المدخل. يمكن تعديل الكود كالتالي:

function myFunction() {
    let userInput = document.querySelector("#userInput");
    let printName = document.querySelector("#printName");
    if (userInput.value.trim() === "") {
        printName.innerHTML = "required";
    } else {
        printName.innerHTML = userInput.value;
    }
}

وهذا حل أخر.

JS

function myFunction(event) {
    let userInput = document.querySelector("#userInput");
    let printName = document.querySelector("#printName");

    if(userInput.value === '') {
        userInput.setCustomValidity("Required"); // تعيين رسالة توضح أن الحقل المطلوب وضع قيمة له
    } else {
        userInput.setCustomValidity("");
        printName.innerHTML = userInput.value;
    }
}

تم إضافة التحقق من قيمة الحقل قبل تشغيل الدالة myFunction، حيث يتم التحقق من إذا كان قيمة الحقل فارغة أو لا، في حالة كان الحقل فارغ يتم تعيين رسالة توضح أن الحقل مطلوب باستخدام الدالة setCustomValidity، وفي حالة ملأ الحقل بقيمة يتم تعيين قيمة اسم المستخدم للعنصر الذي لدية المعرف printName.