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

y3bcpkx1  于 2023-04-10  发布在  Java
关注(0)|答案(1)|浏览(163)

我在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>
hxzsmxv2

hxzsmxv21#

使用表单验证中的构建。

  • 我重组了HTML。去掉了ID,它们在表单中是不必要的。
  • 错误消息由JS和CSS控制。
  • 使用pattern属性验证内容(我没有测试正则表达式)。
  • 使用username的minlenght属性。
  • 为所有输入元素使用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-Z\u0600-\u06ff\u0750-\u077f\ufb50-\ufbc1\ufbd3-\ufd3f\ufd50-\ufd8f\ufd92-\ufdc7\ufe70-\ufefc\ufdf0-\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>

相关问题