完全驗證后仍未提交表單
[英]form not being submitted even after full validation
問題描述
理想案例：
- 如果表單有效，則將數據發送到 servlet。
- 如果沒有顯示相應的錯誤
實際發生了什么：當我提交一個帶有錯誤憑據的表單時，表單會卡住並且數據不會 go 到 servlet，這正是我們想要的，但是當我輸入正確的憑據時，即使表單沒有被提交給 servlet。 這是我的 JavaScript 代碼：
const form = document.getElementById('register-form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const email = document.getElementById('email');
const password = document.getElementById('password');
const sendData = (fnameVal, sRate, count) => {
if (sRate === count) {
swal("Congratulations " + fnameVal + " !", "Account Created Successfully", "success");
form.submit();
}
}
const successMsg = (fnameVal) => {
let formG = document.getElementsByClassName('form-group');
var count = formG.length - 1;
for (var i = 0; i < formG.length; i++) {
if (formG[i].className === "form-group success") {
var sRate = 0 + i;
sendData(fnameVal, sRate, count);
} else {
return false;
}
}
}
const isEmail = (emailVal) => {
var re = /^\S+@\S+\.\S+$/;
if (!re.test(emailVal)) return false;
var atSymbol = emailVal.indexOf("@");
if (atSymbol < 1) return false;
var dot = emailVal.indexOf('.');
if (dot === emailVal.length - 1) return false;
return true;
}
const isPassword = (passwordVal) => {
var re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
if (!re.test(passwordVal)) {
return false;
}
return true;
}
const validate = () => {
const fnameVal = fname.value.trim();
const lnameVal = lname.value.trim();
const emailVal = email.value.trim();
const passwordVal = password.value.trim();
// validate first-name
if (fnameVal.length <= 2) {
setErrorMsg(fname, 'first-name requires min 3 char');
} else {
setSuccessMsg(fname);
}
// check last-name
if (lnameVal.length <= 2) {
setErrorMsg(lname, 'last-name requires min 3 char');
} else {
setSuccessMsg(lname);
}
// check email
if (!isEmail(emailVal)) {
setErrorMsg(email, 'not valide email');
} else {
setSuccessMsg(email);
}
// check password
if (!isPassword(passwordVal)) {
setErrorMsg(password, "min 8 char, at least 1 uppercase and lowercase letter, one number and special character");
} else {
setSuccessMsg(password);
}
successMsg(fnameVal);
}
function setErrorMsg(input, errormsgs) {
const formGroup = input.parentElement;
const small = formGroup.querySelector('small');
formGroup.className = "form-group error";
small.innerText = errormsgs;
}
function setSuccessMsg(input) {
const formGroup = input.parentElement;
formGroup.className = "form-group success";
}
var s = document.getElementById("status").value;
if (s == "success") {
swal("Congratulations", "Account Created Successfully", "success");
}
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuizzBuzz Sign-Up Portal</title>
<link rel="stylesheet" href="./css/registration-style.css">
<!--font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<input type="hidden" name="hiddenalert" id = "status" value = "<%= request.getAttribute("hiddenalert") %>">
<div class="main">
<section class="signup">
<div class="container">
<div class="signup-content">
<div class="signup-image">
<figure>
<img src="./images/signup-image.jpg" alt="singup-image">
</figure>
</div>
<div class="signup-form">
<h2 class="title">Create an Account</h2>
<form method="post" action="Register" class="register-form" id="register-form">
<div class="form-group">
<select id="userType" class="userType" name="userType" required="required">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="admin">Admin</option>
</select>
</div>
<div class="form-group">
<input type="text" name="firstname" id="fname" placeholder="Enter your first-name" autocomplete="off" required="required">
<i class="fa-solid fa-circle-check"></i>
<i class="fa-solid fa-exclamation-circle"></i>
<small>Error!</small>
</div>
<div class="form-group">
<input type="text" name="lastname" id="lname" placeholder="Enter your last-name" autocomplete="off" required="required">
<i class="fa-solid fa-circle-check"></i>
<i class="fa-solid fa-exclamation-circle"></i>
<small>Error!</small>
</div>
<div class="form-group">
<input type="email" name="email" id="email" placeholder="Enter your Email ID" autocomplete="off" required="required">
<i class="fa-solid fa-circle-check"></i>
<i class="fa-solid fa-exclamation-circle"></i>
<small>Error!</small>
</div>
<div class="form-group">
<input type="password" name="password" id="password" placeholder="Enter your password" autocomplete="off" required="required">
<i class="fa-solid fa-circle-check"></i>
<i class="fa-solid fa-exclamation-circle"></i>
<small>Error!</small>
</div>
<input type="submit" value="Submit" onclick = "event.preventDefault(); validate()" class="button">
</form>
</div>
</div>
</div>
</section>
</div>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="./js/member-registration.js"></script>
</body>
</html>
我認為這與event.preventDefault() function 有關，但我不知道如何解決這個問題。甜蜜的警報也不起作用
1 個解決方案
解決方案1
0 2022-09-29 21:24:21
我強烈建議您也在 servlet（或服務器端）中驗證用戶和密碼格式。
這是因為人們可以刪除或停止所有 javascript 驗證並直接發送他們的數據。
在客戶端驗證沒有錯，但一點也不安全。
現在，回答您的請求，如果憑據格式正確，您只需提交這樣的表單標簽。
<form method="post" action="Register" class="register-form" id="register-form">
“action”屬性工作是將表單內容重定向到您在其中寫入的 url。
所以action="Register"是不正確的（如果你到達一個 servlet，它必須是一個有效的路徑，比如：'/Register'）。
在這個位置，您必須編寫一個當前正在被 servlet 或 jsp 偵聽的相對路徑，如下所示：
action="register.jsp"或action="/register"
這樣，當您提交表單時，它會將您和您的表單內容重定向到您編寫的路徑。
另一種方法是通過 ajax 發送數據（您可以研究它），發送表單數據時無需重新加載，您的 javascript 會收到來自服務器的響應。
讓我知道我是否有幫助。
即使驗證失敗也會提交表單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.