Как отобразить сообщение об ошибке, когда поля не заполнены в JavaScript? - PullRequest
0 голосов
/ 16 мая 2019

как отобразить сообщение об ошибке, когда ввод не заполнен?вот мой код:

<body>
    <form method="post">
        <label>Enter your name</label>
        <input id="myName" type="text" placeholder="Your name here"><br>
        <label>enter your first name</label>
        <input id="myFirstName" type="text" placeholder="Your first name here"><br>
        <input id="myButton" type="button" value="submit">
       </form>
        <p id="mydisplay"></p>
    <script src="script.js"></script>
</body>

function myFunction(){
    var x = document.getElementById("myName").value + "<BR>" + document.getElementById("myFirtName").value ;
    if (x != ""){
        alert("Thank you fill in the fields")
    } else{
        document.getElementById("myDisplay").innerHTML = x;
    }
}

window.addEventListener("click", function () {
    document.getElementById("myButton").addEventListener("click", myFunction);
});

пока я проверяю поля раньше, но сообщение об ошибке не показывает, что мой ввод пуст.с другой стороны, после этого он хорошо показывает мне, что я отмечаю на входе на моей странице

Ответы [ 2 ]

0 голосов
/ 16 мая 2019

Как насчет использования требуемого атрибута?было бы намного проще, попробуйте это ..

<!DOCTYPE html>
<html>
<body>

<h2>The required Attribute</h2>
<p>The required attribute specifies that an input field must be filled out before submitting the form.</p>

<form action="/action_page.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari prior version 10.1.</p>

</body>
</html>
0 голосов
/ 16 мая 2019

Попробуйте:

Проверяет, не заполнен ли один из них.

function myFunction(){
    if (!document.getElementById("myName").value || !document.getElementById("myFirstName").value){
        alert("Thank you fill in the fields")
    } else{
        document.getElementById("myDisplay").innerHTML = x;
    }
}

Пустые строки не являются "правдивыми" в JavaScript.

Ссылка: https://developer.mozilla.org/en-US/docs/Glossary/Truthy

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...