간단한 HTML, TAILWINDCSS 및 Javascript 양식 유효성 검사

27524 단어 tailwindcssjavascriptcsshtml
이 간단한 자습서에서는 간단한 고급 유효성 검사 양식을 만드는 방법에 대한 전체 가이드를 공유할 것입니다.

JS를 사용한 이유/사용한 ​​이유



저는 풀스택 웹 개발자이기 때문에 자바스크립트를 많이 사용하는 것을 좋아합니다. 나는 모든 유형의 응용 프로그램 개발에서만 사용하며 그것은 나에게 마술처럼 작동합니다.
나는 최근에 tailwindcss를 사용하기 시작했지만 이 튜토리얼에서는 많은 스타일링 작업에 시간을 들이지 않았지만 시간이 지남에 따라 내 코드github account가 업데이트되고 더 많은 기능이 추가될 것입니다.

HTML 코드:




<!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" />
    <script src="https://cdn.tailwindcss.com"></script>

    <link rel="stylesheet" href="./index.css">
    <title>FORM VALIDATION</title>
  </head>
  <body>
    <div
      class="min-h-screen bg-slate-900 min-h-screen flex items-center justify-center"
    >
      <div
        class="backdrop-blur-sm bg-white/80 p-5 max-w-md w-full rounded-md shadow-white/10 shadow-sm"
      >
        <form
        id="login"
          class="text-black text-md flex flex-col space-y-3"
          autocomplete="off"
        >
          <div class="flex flex-col w-full space-y-3 tracking-wide">
            <label class="text-lg tracking-wide font-mono" 
            for="firstName"></label>
              First Name</label
            >
            <input
              type="text"
              name="firstName"
              id="firstName"
              class="border-2 firstName w-full p-2 rounded-lg focus:outine-none focus:outline-none"
              autocomplete="off"
              aria-autocomplete="off"
            />
            <span class="block firstNameError text-red-500 text-xs hidden">error</span>
          </div>
          <div lass="flex flex-col w-full space-y-3 tracking-wide">
            <label class="text-lg tracking-wide font-mono" for="firstName">
              Last Name</label
            >
            <input
              type="text"
              name="lastName"
              id="lastName"
              class="border-2 lastName w-full p-2 rounded-lg focus:outine-none focus:outline-none"
              autocomplete="off"
            />
            <span class="block lastNameError text-red-500 text-xs hidden">error</span>
          </div>
          <div lass="flex flex-col w-full space-y-3 tracking-wide">
            <label  class="text-lg tracking-wide font-mono" for="email"> Your Email</label>
            <input
              type="text"
              name="email"
              id="email"
              class="border-2 email w-full p-2 rounded-lg focus:outine-none focus:outline-none"
              autocomplete="off"
            />
            <span class="block emailError text-red-500 text-xs  hidden">error</span>
          </div>
          <div class="">
            <input value="Login Now" type="submit" id="btn" class="px-4 py-3 mt-5 rounded-md bg-slate-600 w-full text-white tracking-wide transition-all duration-300 ease-in-out hover:bg-slate-900 
            cursor-pointer disabled:cursor-not-allowed disabled:opacity-20"/>

          </div>
        </form>
      </div>
    </div>
        <script  src="./index.js"></script>

  </body>
</html>


자바스크립트 코드:




const firstNameInput = document.getElementById("firstName");
const lastNameInput = document.getElementById("lastName");
const emailInput = document.getElementById("email");
const buttonSubmit = document.getElementById("btn");
const form = document.getElementById("login");
const firstNameError = document.getElementsByClassName("firstNameError")[0];
const lastNameError = document.getElementsByClassName("lastNameError")[0];
const emailError = document.getElementsByClassName("emailError")[0];

//define and declare and empty errors object
let error = {};

/* This is a JavaScript event listener. It is a way to listen for an event. In this case, it is
listening for the form to be submitted. */
form.addEventListener("submit", function (e) {
  e.preventDefault();
//function to validate the form fields before submitting
  checkEmpty();
});

// validate empty fields and set error object
function checkEmpty() {
  //loop and remove all key and value fields in the errors object
  for (let key in error) {
    delete error[key];
  }
  //set all in firstname, lastname, email spans to display none
  firstNameError.style.display = "none";
  lastNameError.style.display = "none";
  emailError.style.display = "none";

  //remove all the error class "border-red-500 classes"
  firstNameInput.classList.remove("border-red-500");
  lastNameInput.classList.remove("border-red-500");
  emailInput.classList.remove("border-red-500");

//remove white spaces from every input Field
  const firstNameValue = firstNameInput.value.trim();
  const lastNameValue = lastNameInput.value.trim();
  const emailValue = emailInput.value.trim();

  //check if all inputs are empty then add new new error keys to the defined error object
  if (firstNameValue === "") {
    error.firstName = "First Name is required";
  }
  if (lastNameValue === "") {
    error.lastName = "Last Name is required";
  }
  if (emailValue === "") {
    error.email = "Email is required";
  }

  //validate the inputs firstName and lastName
  if (firstNameValue !== "") {
    if (!firstNameValue.match(/^[a-zA-Z0-9]+$/)) {
      error.firstName = "First Name must be letters only";
    }
  }
  if (lastNameValue !== "") {
    if (!lastNameValue.match(/^[a-zA-Z0-9]+$/)) {
      error.lastName = "Last Name must be letters only";
    }
  }
  if (emailValue !== "") {
    //validating an email
    if (!emailValue.match(/^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/)) {
      error.email = "Email must be a valid email";
    }
  }

  //if we have error add the error to the error message
  if (Object.keys(error).length > 0) {
    displayError();
  } else {
    //submit the form with a delay of 2 seconds
    //change the button innerText to submitting and add no-cursor class and disabled attribute to it
    buttonSubmit.value = "Submitting...";
    buttonSubmit.setAttribute("disabled", "disabled");

//set a delay of 2 seconds since we dont have an api endpoint to send the data to just mimic the process
    new Promise(function (resolve, reject) {
      setTimeout(function () {
        resolve(submitForm());
      }, 2000);
    });
  }
}

//display errors respectivey to the span html classes
function displayError() {
  //set all errors to their respectivey and also changing hidden 
error containers to be a block.
  if (error.firstName) {
    firstNameInput.classList.add("border-red-500");
    firstNameError.style.display = "block";
    firstNameError.innerHTML = error.firstName;
  }
  if (error.lastName) {
    lastNameInput.classList.add("border-red-500");
    lastNameError.style.display = "block";
    lastNameError.innerHTML = error.lastName;
  }
  if (error.email) {
    //loop over the classes and add other classes
    emailInput.classList.add("border-red-500");
    emailError.style.display = "block";
    emailError.innerHTML = error.email;
  }
}

//submitting the form
function submitForm() {
//TODO: Add an API ENDPOINT to send the data.

  //show the values for now but later we going to add some api intergration
  console.log(firstNameInput.value);
  console.log(lastNameInput.value);
  console.log(emailInput.value);
  //reset the login buttonSubmit

//after 2 seconds is over change the input type button innerText and remove the disabled attribute.
  buttonSubmit.value = "Login Now";
  buttonSubmit.removeAttribute("disabled");

  //reset the form and clear all fields
  form.reset();
}
Python을 사용하여 Json 파일 구문 분석
【BluePrism】 컬렉션 중복 데이터 제외

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage