javascript - 表单验证执行不正确

Question

如果文本输入为空，我的脚本将禁用表单的提交按钮。我编写了一个单独的脚本，在允许用户将更新的内容提交到数据库之前提示确认窗口。两个脚本单独工作都很好。

当我尝试使用 if/else 语句组合两个脚本时，出现了问题。下面的代码按预期禁用该按钮，并在启用提交按钮后将用户输入的数据插入数据库，但完全绕过确认窗口。

如何在提交任何内容之前再次出现确认窗口？

JavaScript:

<script>   

function validationCheck() {
    if(document.getElementById('updateEventTitle').value==='') { 
        document.getElementById('updateBtn').disabled = true; 
    } else { 
        document.getElementById('updateBtn').disabled = false;

        //Confirmation window
       function updateEvent() {

            var r =confirm('Do you want to update this item?');
            if (r==true)    {
                window.location.href = 'server.php';
            } else {
                event.preventDefault();
            }
        }  
    }
}

</script>

HTML:

<form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTitle'>

  <input type='text' id='updateEventTitle' name='myUpdateEventTitle' size='30' maxlength='40' placeholder='$row[eventName]' onkeyup='validationCheck()' required/>

  <input class='btn btn-primary btn-sm' onclick='updateEvent()' type='submit' name='updateEventTitle' value='Update' id='updateBtn' disabled/> 

</form>

Answer 1

您在两个函数中引用了 event，但它们都没有声明 event 函数参数。您需要在函数中设置 event 参数:

 function validationCheck(event)
 function updateEvent(event)....

而且，仅将一个函数嵌套在另一个函数中并不会使第二个函数运行。相反，稍微重新组织一下 don't set up your events with inline HTML event attributes ，就像首先的 onclick 一样。 JavaScript 是否与 HTML 分开工作。

此外，对于表单，您应该处理的不是 submit 按钮的 click 事件，而是表单。

另外(仅供引用)，don't bother with self-terminating HTML tags .

最后，您将表单操作设置为:editevent.php?updaterow=$iddata，但稍后，如果用户确认他们想要提交，您正在重定向到:server.php。虽然该重定向现在可以工作，但输入到表单中的数据将不会发送给它。相反，通过表单验证，您只需测试应该停止提交的情况，如果该情况不存在，您只需什么都不做，让表单按预期提交。

// Set up your event handlers in JavaScript, not with inline HTML
document.querySelector("form").addEventListener("submit", validationCheck);
document.getElementById("updateEventTitle").addEventListener("keyup", validationCheck);

// Get your DOM references just once, not every time the function runs
let eventTitle = document.getElementById('updateEventTitle');
let btnUpdate = document.getElementById('updateBtn');

function validationCheck(event) {
   if(eventTitle.value==='') { 
     btnUpdate.disabled = true; 
   } else { 
     btnUpdate.disabled = false;

     // If it was the submit button that was pressed...
     if(event.type === "submit"){
       // Confirmation window
       // You only need to test for and handle situations where the form
       // submit event should be halted. Otherwise, let the form submit to its action URL
       if (!confirm('Do you want to update this item?')    {
         event.preventDefault();
       } 
    }
  }
}

<form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTitle'>
  <input type='text' id='updateEventTitle' name='myUpdateEventTitle' size='30' maxlength='40' placeholder='$row[eventName]' required>
  <input class='btn btn-primary btn-sm' type='submit' name='updateEventTitle' value='Update' id='updateBtn' disabled> 
</form>