时间戳

首页 > 解决方案 > 表单验证执行不正确

javascript - 表单验证执行不正确

问题描述

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

当我尝试使用 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>

标签： javascripthtml

解决方案

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

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

而且，只是将一个函数嵌套在另一个函数中并不会使第二个函数运行。相反，重新组织一下，不要像一开始那样使用内联 HTML 事件属性设置您的事件onclick。您的 JavaScript 是否与您的 HTML 分开工作。

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

另外（仅供参考），不要为自终止的 HTML 标签而烦恼。

最后，您已form action设置为：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>

推荐阅读