如果有人提交空表单，我想返回“警报”框答案

【问题标题】：I want to return 'Alert' box if someone submits empty form如果有人提交空表单，我想返回“警报”框
【发布时间】：2021-04-26 14:50:58
【问题描述】：

<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>

这是我的代码，如果有人提交空表单，我想返回“警报”。我应该怎么做？任何帮助将不胜感激

这是一张图片：

【问题讨论】：

标签： javascript html forms computer-science web-development-server

【解决方案1】：

 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>

【讨论】：

【解决方案2】：

通过检查 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 = ""
   };

}

【讨论】：

【解决方案3】：

这是你想要的吗？

<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>

【讨论】：

【解决方案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>

【讨论】：