檢查表單要求，然后使用 ajax 發送數據
[英]check form requirements and then send data with ajax
問題描述
我正在嘗試將表單數據作為 json 發送到我的設備（使用 XMLHttpRequest）。 我的表單有多個必填字段，如果必填字段為空，則不應提交。 但是表單數據發送甚至字段為空！ 我搜索並添加event.preventDefault(); 但這是行不通的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first assignment</title>
<script>
function curlcheck() {
event.preventDefault();
event.stopImmediatePropagation();
var user_id = document.getElementById("user_id").value;
var pass = document.getElementById("password").value;
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
var theUrl = "/submit_test";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({ "ProgMode": user_id, "pass": pass }));
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//document.getElementById("ajax_res").innerHTML = this.responseText;
console.log("success");
}
}
}
</script>
</head>
<body>
<div class="somebox"></div>
<ul>
<h3>Team 1 Online Exam System</h3>
</ul>
<form action="" method="POST">
<div name="form header" class="formhead">
<h1>Welcome</h1>
<p><span id="loginerr" class="err_alert"></span></p>
</div>
<div class="login_box">
<lable for="user_id">User ID</lable>
<input type="text" placeholder="Enter User ID" id="user_id" required>
<label for="password">Password</label>
<input type="password" placeholder="Enter Password" id="password" required>
<button id="but" type="submit" onclick="curlcheck(); return false">Login</button>
</div>
</form>
<div class="footer">
</div>
</body>
</html>
2 個解決方案
解決方案1
1 已采納 2022-07-13 07:46:16
在 HTML5 中，您不需要自己檢查，您可以調用reportValidity()方法進行驗證。
function curlcheck(form){ var user_id = document.getElementById("user_id"); var pass = document.getElementById("password"); if (user_id.reportValidity() && pass.reportValidity()){ var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance var theUrl = "/submit_test"; xmlhttp.open("POST", theUrl); xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xmlhttp.send(JSON.stringify({ "ProgMode": user_id.value, "pass": pass.value })); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { //document.getElementById("ajax_res").innerHTML = this.responseText; console.log("success"); } } } return false; }
<form action="" method="POST" onclick="return curlcheck(this);"> <div name="form header" class="formhead"> <h1>Welcome</h1> <p><span id="loginerr" class="err_alert"></span></p> </div> <div class="login_box"> <lable for="user_id">User ID</lable> <input type="text" placeholder="Enter User ID" id="user_id" required> <label for="password">Password</label> <input type="password" placeholder="Enter Password" id="password" required> <button>Login</button> </div> </form>
解決方案2
0 2022-07-13 07:28:32
如果所需數據為空，則從curlcheck函數返回 false。
<script>
function curlcheck(event) {
event.preventDefault();
event.stopImmediatePropagation();
var user_id = document.getElementById("user_id").value;
var pass = document.getElementById("password").value;
if (user_id === "" || pass === "") {
return false; //or show required message
}
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
var theUrl = "/submit_test";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({ "ProgMode": user_id, "pass": pass }));
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//document.getElementById("ajax_res").innerHTML = this.responseText;
console.log("success");
}
}
}
</script>
使用ajax檢查（驗證）發送表單數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.