Alamin ang Lihim ng JavaScript Form Validation!

Ang JavaScript form validation ay isang mahalagang bahagi ng modernong web development. Sa pamamagitan nito, masisiguro natin na ang mga input mula sa mga user ay tama at ligtas bago ito ipadala sa server. Sa artikulong ito, tatalakayin natin ang iba't ibang paraan ng pag-validate ng form gamit ang JavaScript, pati na rin ang mga halimbawa at teknik na makakatulong sa iyong proyekto.

Bak Bakit Mahalaga ang Form Validation?

Ang form validation ay tumutulong upang maiwasan ang mga error at masiguro na ang data na kinokolekta ay tama. Ito rin ay isang paraan upang mapabuti ang karanasan ng user sa pamamagitan ng pagbibigay ng agarang feedback sa kanilang input.

Mga Uri ng Validation

May dalawang pangunahing uri ng validation: client-side at server-side. Ang client-side validation ay isinasagawa sa browser gamit ang JavaScript, habang ang server-side validation ay isinasagawa sa server. Sa artikulong ito, magpo-focus tayo sa client-side validation gamit ang JavaScript.

Halimbawa ng Simple Form Validation

Narito ang isang simpleng halimbawa ng form validation gamit ang JavaScript:

<form name="myForm" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>

Sa halimbawa sa itaas, tinitiyak ng function na 'validateForm' na hindi blangko ang field na 'fname' bago isumite ang form.

Paggamit ng Regular Expressions (Regex)

Ang regular expressions ay isang makapangyarihang tool para sa pag-validate ng mga input tulad ng email addresses at passwords. Narito ang isang halimbawa ng pag-validate ng email address gamit ang regex:

const emailIsValid = email => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

Ang function na 'emailIsValid' ay nagbabalik ng 'true' kung ang email ay sumusunod sa tamang format.

Pag-handle ng Iba't Ibang Uri ng Input

Sa mas kumplikadong mga form, maaaring kailanganin mong i-validate ang iba't ibang uri ng input tulad ng pangalan, username, password, atbp. Narito ang isang halimbawa ng pag-validate ng iba't ibang fields:

const form = document.getElementById("myForm");

form.addEventListener("submit", function (e) {
  e.preventDefault();

  const fName = document.getElementById("firstName").value;
  const lName = document.getElementById("lastName").value;
  const user = document.getElementById("username").value;
  const email = document.getElementById("email").value;
  const pass = document.getElementById("password").value;

  let isValid = true;

  const nameRegex = /^[a-zA-Z]{1,30}$/;
  if (!nameRegex.test(fName)) {
    alert("First name must be 1-30 letters.");
    isValid = false;
  }
  if (!nameRegex.test(lName)) {
    alert("Last name must be 1-30 letters.");
    isValid = false;
  }
  const userRegex = /^[a-zA-Z0-9_]{3,15}$/;
  if (!userRegex.test(user)) {
    alert("Username must be 3-15 chars (letters, numbers, underscores).");
    isValid = false;
  }
  const emailRegex = /^([a-zA-Z0-9._%+-]+)@([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,})$/;
  if (!emailRegex.test(email)) {
    alert("Invalid email address.");
    isValid = false;
  }
  const passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%?&])[A-Za-z\d@$!%?&]{8,}$/;
  if (!passRegex.test(pass)) {
    alert("Password must have 8+ chars, 1 uppercase, 1 number, 1 special char.");
    isValid = false;
  }

  if (isValid) {
    alert("Form submitted successfully!");
  }
});

Sa code sa itaas, ginagamit ang iba't ibang regular expressions upang i-validate ang bawat field. Kung ang lahat ng fields ay valid, ipapakita ang alert na "Form submitted successfully!".

Pag-customize ng Error Messages

Maari mong i-customize ang mga error messages upang mas maging user-friendly. Halimbawa:

const email = document.getElementById("mail");

email.addEventListener("input", (event) => {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I am expecting an email address!");
  } else {
    email.setCustomValidity("");
  }
});

Sa code na ito, kapag ang input ay hindi isang valid na email address, magpapakita ito ng custom message na "I am expecting an email address!".

Konklusyon

Ang JavaScript form validation ay isang mahalagang bahagi ng web development na tumutulong upang masiguro ang kalidad ng data at mapabuti ang karanasan ng user. Sa pamamagitan ng paggamit ng mga teknik tulad ng regular expressions at pag-customize ng error messages, maaari kang lumikha ng mas ligtas at user-friendly na mga form.