JavaScript를 사용하여 양식 제출

1. HTML 양식 만들기
2. 양식에 액세스
3. JavaScript에서 양식 필드 값 가져 오기
4. JavaScript의 양식 필드에서 데이터 유효성 검사

이 튜토리얼에서는 JavaScript를 사용하여 양식을 제출하는 방법을 소개합니다.

양식은 사용자로부터 데이터를 가져와 구조화 된 데이터베이스에 저장하는 데 도움이됩니다. 양식 제출은 다양한 앱과 웹 사이트에서 작업 할 때 중요한 이벤트입니다. form.submit()를 호출하거나 제출 버튼을 클릭하는 것만 큼 간단하지 않습니다. 양식이 제출되면 요청이 서버로 전송되기 직전에 제출 이벤트가 시작됩니다. 여기에서 JavaScript가 실행되고 입력 된 데이터의 유효성을 검사합니다. 객체를 만들고 다양한 속성을 추가 할 수도 있습니다.

따라서 양식을 제출하려면 먼저 양식을 만들고 양식에 액세스하고 다양한 필드의 값을 가져오고 모든 값을 확인한 다음 제출 버튼 / 호출for.submit()을 클릭해야합니다.

HTML 양식 만들기

<form>요소를 사용하여 HTML 양식을 만들 수 있습니다.

<form action="/" method="post" id="signup-form">
    <input type="text" name="Username" placeholder="Full Name">
    <input type="email" name="EmailAddress" placeholder="Email Address">
    <button type="submit">Submit</button>
</form>

위의 양식에는action및method의 두 가지 속성이 있습니다.

1. action: 양식 제출 프로세스를 처리 할 URL을 지정합니다.
2. method: 양식 제출에 사용되는 HTTP 메소드를 지정합니다. post메소드는 요청 본문에있는 데이터를 서버로 전송하여 데이터베이스에 데이터를 저장하는 데 도움이됩니다. get메소드는?가있는 URL에 양식 데이터를 추가합니다.

양식에 액세스

getElementByTag, getElementById 등과 같은 JavaScript 선택기 중 하나를 사용하여 양식 요소에 액세스 할 수 있습니다.

let form = document.getElementById('signup-form');

JavaScript에서 양식 필드 값 가져 오기

양식 요소 배열을 사용하거나 필드의 ID를 참조하여 양식의 입력 필드에 액세스 할 수 있습니다. 필드에 액세스 한 후.values속성을 사용하여 해당 필드에 저장된 값을 가져올 수 있습니다. 양식 데이터를 획득 한 후에는 최종 양식 제출을 진행하기 전에 데이터의 유효성을 검사 할 수 있습니다.

// Syntax1:
let name = form.elements[0];
let username = name.value;
// Syntax2:
let name = form.elements['name'];
let username = name.value;

JavaScript의 양식 필드에서 데이터 유효성 검사

제출 버튼에 이벤트 리스너를 추가하고 다음 페이지로 이동하기 전에 유효성 검사 절차를 호출합니다. 예 : 가입 페이지의 경우 사용자는 이메일과 비밀번호를 모두 제공해야합니다.

// Function to check that the input field is not empty while submitting
function requireValue(input) {
  return !(input.value.trim() === '');
}
// Event listener to perform the validation when user clicks on submit button
form.addEventListener('submit', (event) => {
  requiredFields.forEach((input) => {
    valid = valid | requireValue(input.input);
  });
  if (!valid) {
    event.preventDefault();
  }
});

위의 코드에서 입력 필드가 비어 있는지 확인하기 위해 작은 유효성 검사를 작성했습니다. 그런 다음 제출 버튼에 이벤트 리스너를 연결하여 데이터를 액션 URL로 전달하기 전에 먼저 처리합니다. 입력 필드가 비어 있지 않은지 확인하고, 비어있는 경우event.preventDefault()를 호출하여 양식 제출을 방지합니다. 이러한 방식으로 JavaScript와 HTML은 완전한 양식 제출을 처리합니다.