Блог

Главная - Вопросы по программированию - Я хочу вернуть поле «Оповещение», если кто-то отправляет пустую форму

Я хочу вернуть поле «Оповещение», если кто-то отправляет пустую форму

#javascript #html #forms #computer-science #web-development-server

#javascript #HTML #формы #информатика #веб-разработка-сервер

Вопрос:

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>To Do List</h1>
    <form>
        <input autocomplete="off" autofocus id="todotext" 
        type="text">
        <input onclick="serve(); return false" type="submit">
    </form>

    <ol id="add"></ol>

</body>

<script>
    function serve(){
        const neww = document.getElementById('add');
        let text = document.getElementById('todotext').value;
        const a = document.createElement('li');
        a.innerText = text;
        neww.appendChild(a);
        document.getElementById('todotext').value = "";
    }
</script>
</html>

Вот мой код, и я хочу вернуть «Оповещение», если кто-то отправит пустую форму. Как мне это сделать?Любая помощь будет оценена

Вот изображение:

Это изображение, нажмите здесь

Ответ №1:

Это то, что вы хотите?

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>To Do List</h1>
    <form>
        <input autocomplete="off" autofocus id="todotext" 
        type="text">
        <button onclick="todotext.value != '' ? serve() : alert('Input field is blank')" >Submit</button>
    </form>

    <ol id="add"></ol>

</body>

<script>
    var todotext = document.getElementById('todotext');
    function serve() {
        const neww = document.getElementById('add');
        let text = todotext.value;
        const a = document.createElement('li');
        a.innerText = text;
        neww.appendChild(a);
        document.getElementById('todotext').value = "";
    }
</script>
</html>

Ответ №2:

  String.prototype.isEmpty = function() {
    return (this.length === 0 || !this.trim());
};
 
 function serve(){
        const neww = document.getElementById('add')
        let text = document.getElementById('todotext').value;
        if( text.isEmpty() ){
            alert('cannot be blank');
          return;
        }
        const a = document.createElement('li')
        a.innerText = text
        neww.appendChild(a)
        document.getElementById('todotext').value = ""
    } 
 <h1>To Do List</h1>
    <form>
        <input autocomplete="off" autofocus id="todotext" 
        type="text">
        <input onclick="serve(); return false" type="submit">
    </form>
    <ol id="add"></ol>

Ответ №3:

добавьте условие при добавлении нового элемента, проверив значение todoText

    function serve(){
   const neww = document.getElementById('add')
   let text = document.getElementById('todotext').value
   if(text == ""){
       alert('field is required');
   }
   else{
     const a = document.createElement('li')
     a.innerText = text
     neww.appendChild(a)
     document.getElementById('todotext').value = ""
   };

}

Ответ №4:

   function serve(){
        const neww = document.getElementById('add')
        let text = document.getElementById('todotext').value
        if(text.trim().length === 0){
          alert("Field is empty");
        }else{
        const a = document.createElement('li')
        a.innerText = text
        neww.appendChild(a)
        document.getElementById('todotext').value = ""
        }
    } 
 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>To Do List</h1>
    <form>
        <input autocomplete="off" autofocus id="todotext" 
        type="text">
        <input onclick="serve(); return false" type="submit">
    </form>
    <ol id="add"></ol>

</body>
</html>

Метки: