Question

下面是我的简单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（）之前验证表单。

Answer 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');
}

Answer 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内收集错误，并在以后向用户显示错误，以防他们错误插入内容。

在调用javascript函数之前，表单未经过验证

2 个答案: