调用 javascript 函数之前未验证表单答案

【问题标题】：Form is not validated before call javascript function调用 javascript 函数之前未验证表单
【发布时间】：2017-09-06 12:52:41
【问题描述】：

下面是我的简单 jsp 表单，我需要在执行 ajax 调用之前验证分支号是否为空。

<body>
<div id = "divOrderuserinputContainer">
<table align="center" id="table">
    <form id="orderform" onsubmit="return validateForm()" method="POST">          
        <td class="label">Branch Number:
            <input type="text" name="branch" ></input>                  
        </td>       
    <td>
        <input type="submit" value="submit" onclick="addData(); return false;"></input>
    </td>
    </form>
 </table>
 </div>
</body>

下面是我的javascript

function validateForm(form) {
var x = document.forms["orderform"]["branch"].value;
if (x == "") {
    alert("You must select a valid Branch branch");
    return false;   
}
}

如果我删除返回 false；在提交输入中，它确实从分支输入中填充警报，但它仍然调用 addData()。如何在调用函数 addData() 之前验证表单。

【问题讨论】：

标签： javascript forms jsp

【解决方案1】：

当您单击提交按钮时，您的函数 addData 将首先被调用，然后是您的 validateForm 函数。如果我理解正确，您想在提交时验证表单，然后在一切正常的情况下调用您的 addData！在这种情况下，您可以这样做：

<body>
<div id = "divOrderuserinputContainer">
<table align="center" id="table">
    <form name="orderform" id="orderform" onsubmit="return validateForm();" method="POST">          
        <td class="label">Branch Number:
            <input type="text" name="branch" >                  
        </td>       
    <td>
        <input type="submit" value="submit">
    </td>
    </form>
 </table>
 </div>
</body>

和 JS：

function validateForm() {
  var x = document.forms["orderform"]["branch"].value;
  if (x == "") {
      alert("You must select a valid Branch branch");
      return; 
  } else {
    addData();
  }
}

function addData() {
    // di stuff here with your data
    alert('Everything is okay do stuff');
}

【讨论】：

【解决方案2】：

只创建一个在submit 事件上调用的函数。在该函数中调用另一个函数，例如您的 validateForm()。如果您在验证时发现有问题，请致电event.preventDefault()/event.returnValue = false 或直接返回false，因为您已经知道了。此外，如果您希望分支编号为数字，请使用isNumeric 函数，而不是仅检查它是否为空字符串。

function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
function isDataValid(data) {
    // your checks...
    
    if (!isNumeric(data.branch)) return false;
    return true; 
}

function addData() {
   var e = event || window.event;
   var data = {};
   data.branch = document.forms["orderform"]["branch"].value;
   // other data
   // ...

   if(!isDataValid(data)) { 
       console.log("Data is invalid! The submit will not happen!");
       e.preventDefault();
   } else {
       // remove this else-branch later to make submit happen because the data in this case is valid
       console.log("Data is valid! The submit will happen!");
       e.preventDefault();
   }
}

document.getElementById("orderform").addEventListener('submit', addData, false);

<div id = "divOrderuserinputContainer">
<table align="center" id="table">
    <form id="orderform" method="POST">          
        <td class="label">Branch Number:
            <input type="text" name="branch" ></input>                  
        </td>       
    <td>
        <input type="submit" value="submit"></input>
    </td>
    </form>
 </table>
 </div>

PS 不要忘记处理跨浏览器addEventListener/attachEvent、preventDefault/returnValue = false 等。您还可以在isDataValid 中收集错误，并在以后向用户显示，以防他们错误地插入了某些内容。

【讨论】：