我在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="user@gmail.com" 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>
1条答案
按热度按时间hxzsmxv21#
使用表单验证中的构建。
这里有很多,所以我删除了表单中的一些字段。