在JavaScript中验证后重新提交表单问题

Question

我有一个JavaScript表单验证的问题。除非重新加载页面，否则无法通过再次单击提交按钮在验证后重新提交表单。我希望能够重新提交表单后重新填写错误显示的字段，而不需要刷新页面和表单。是否有一种方法可以通过单击提交按钮而不重新加载页面来重新提交表单?

const form = document.getElementById("form");
const P_FirstName = document.getElementById("P_FirstName");
const P_LastName = document.getElementById("P_LastName");
const P_Email = document.getElementById("P_Email");
const P_PhoneNum = document.getElementById("P_PhoneNum");
const ParentID = document.getElementById("ParentID");
const Password = document.getElementById("Password");
// const cPassword = document.getElementById("c-password");
//Show Error Message
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = "input error";
const small = formControl.querySelector("small");
small.innerText = message;
}
//Show Success message
function showSuccess(input) {
const formControl = input.parentElement;
formControl.classList.add("success");
}
// Get Field Name
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// Condition Functions 
//1. Check Required fields
function checkRequired(inputArr) {
inputArr.forEach(function(input) {
if (input.value.trim() === "" || input.value === '') {
showError(input, `الرجاء اكمال المعلومات`);
} else {
showSuccess(input);
}
});
}
//2. Check Input Lenght
function checkLenghth(input, min, max) {
if (input.value.length < min) {
showError(
input,
`${getFieldName(input)} must be at least ${min} characters `
);
} else if (input.value.length > max) {
showError(
input,
`${getFieldName(input)} must be less than ${max} characters `
);
} else {
showSuccess(input);
}
}
// 2. Check First Name
function checkFirstName(input) {
var letters = /^[A-Za-z]+$/;
var ArabicLetters = /^([u0600-u06ff]|[u0750-u077f]|[ufb50-ufbc1]|[ufbd3-ufd3f]|[ufd50-ufd8f]|[ufd92-ufdc7]|[ufe70-ufefc]|[ufdf0-ufdfd])*$/g;
if (input.value.match(letters) || input.value.match(ArabicLetters)) {
showSuccess(input);
} else {
showError(
input,
`الاسم الاول يجب ان يتضمن حروف فقط بلا أرقام  `
);
}
}
// 3. Check Last Name
function checkLastName(input) {
var letters = /^[A-Za-z]+$/;
var ArabicLetters = /^([u0600-u06ff]|[u0750-u077f]|[ufb50-ufbc1]|[ufbd3-ufd3f]|[ufd50-ufd8f]|[ufd92-ufdc7]|[ufe70-ufefc]|[ufdf0-ufdfd])*$/g;
if (input.value.match(letters) || input.value.match(ArabicLetters)) {
showSuccess(input);
} else {
showError(
input,
`الاسم الاخير يجب ان يتضمن حروف فقط بلا أرقام  `
);
}
}
// 3. Check E-mail Is Valid
function checkEmail(input) {
var validRegex = new RegExp(/^(("[w-s]+")|([w-]+(?:.[w-]+)*)|("[w-s]+")([w-]+(?:.[w-]+)*))(@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$)|(@[?((25[0-5].|2[0-4][0-9].|1[0-9]{2}.|[0-9]{1,2}.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2}).){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})]?$)/i);
if (input.value.match(validRegex)) {
showSuccess(input);
} else {
showError(input, "البريد الالكتروني المدخل غير صحيح");
}
}
// 4. Check Phone Number
function checkPhoneNumber(input) {
var Ph_regex = new RegExp(/^(009665|9665|+9665|05|5)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/);
if (input.value.match(Ph_regex)) {
showSuccess(input);
} else {
showError(input, "رقم الهاتف المدخل غير صحيح");
}
}
// 5. Check Username 
function checkUserName(input) {
var usernameRegex = /^[a-zA-Z0-9]+$/;
if (input.value.match(usernameRegex)) {
showSuccess(input);
} else {
showError(input, " اسم المستخدم المدخل غير صحيح");
}
}
function checkPassword(input) {
var passw = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;
if (input.value.match(passw)) {
showSuccess(input);
} else {
showError(input, "يجب ان تحتوي كلمة المرور على احرف كبيرة وصغيرة ، ورقم و رمز واحد على الاقل");
}
}

form.addEventListener("submit", (e) => {
e.preventDefault();
checkRequired([P_FirstName, P_LastName, P_Email, P_PhoneNum, ParentID, Password]); //Done
checkLenghth(Password, 8, 25);
checkFirstName(P_FirstName); //Done
checkLastName(P_LastName); //Done
checkEmail(P_Email); //Mostly yes
checkPhoneNumber(P_PhoneNum); // Done
checkUserName(ParentID); // 
checkPassword(Password);
});

<div>
<div class="con">
<h1> إنشاء حساب جديد</h1>
<form action="" id="form" class="form">
<div class="input" style="display:flex; flex-direction: row; justify-content: center; align-items: center">
<label for="P_FirstName">الاسم الاول</label>
<input type="text" name="P_FirstName" id="P_FirstName" autocomplete="off" />
<small>Error message</small>
</div>
<div class="input" style="display:flex; flex-direction: row; justify-content: center; align-items: center">
<label for="P_LastName">الاسم الاخير</label>
<input type="text" name="P_LastName" id="P_LastName" autocomplete="off" />
<small>Error message</small>
</div>
<div class="input" style="display:flex; flex-direction: row; justify-content: center; align-items: center" lang="en">
<label for="P_Email">البريد الالكتروني</label>
<input type="text" name="P_Email" id="P_Email" placeholder="[e-mail]" autocomplete="off" />
<small>Error message</small>
</div>
<div class="input" lang="en" style="display:flex; flex-direction: row; justify-content: center; align-items: center">
<label for="P_PhoneNum">رقم الهاتف </label>
<input type="text" name="P_PhoneNum" id="P_PhoneNum" placeholder="05xxxxxxxx" autocomplete="off" />
<small>Error message</small>
</div>
<div class="input" lang="en" style="display:flex; flex-direction: row; justify-content: center; align-items: center">
<label for="ParentID">اسم المستخدم </label>
<input type="text" name="ParentID" id="ParentID" autocomplete="off" />
<small>Error message</small>
</div>
<div class="input" lang="en" style="display:flex; flex-direction: row; justify-content: center; align-items: center">
<label for="Password">كلمة المرور </label>
<input type="password" name="Password" id="Password" placeholder="********" />
<small>Error message</small>
</div>
<button type="submit">إكمال</button>

Answer 1

使用内置表单验证

• 我重构了HTML。删除了id，它们在表单中是不必要的。
• 错误信息由JS和CSS控制。
• 使用pattern属性验证内容(我没有测试正则表达式)。
• 用户名使用minlength属性
• 为所有输入元素使用required属性。只有当所有要求都满足时，表格才会提交。

这里有很多字段，所以我删除了一些字段。

const form = document.forms.form;
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log('the form is submitted');
}, true);
form.addEventListener("invalid", e => {
e.preventDefault();
e.target.parentElement.querySelector('small').classList.add('visible');
}, true);

.form>label {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center
}
small {
display: none;
}
small.visible {
display: inline;
}
input:valid~small {
display: none;
}

<div>
<div class="con">
<h1> إنشاء حساب جديد</h1>
<form action="" name="form" class="form">
<label>
<span>الاسم الاول</span>
<input type="text" name="P_FirstName" pattern="[a-zA-Zu0600-u06ffu0750-u077fufb50-ufbc1ufbd3-ufd3fufd50-ufd8fufd92-ufdc7ufe70-ufefcufdf0-ufdfd]+" autocomplete="off" required />
<small>الرجاء اكمال المعلومات</small>
</label>
<label>
<span>اسم المستخدم </span>
<input type="text" name="ParentID" pattern="^[a-zA-Z0-9]+$" minlength="5" autocomplete="off" required />
<small>اسم المستخدم المدخل غير صحيح</small>
</label>
<label>
<span>كلمة المرور </span>
<input type="password" name="Password" pattern="(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}" placeholder="********" required />
<small>يجب ان تحتوي كلمة المرور على احرف كبيرة وصغيرة ، ورقم و رمز واحد على الاقل</small>
</label>
<button>إكمال</button>
</form>
</div>
</div>