모든 양식 필드가 비어 있지 않은 경우에만 단추를 다음 페이지로 이동시킬 수 있습니다.

Question

양식을 제출하는 단추가 있지만 다른 페이지로 연결되기를 원합니다. 폼의 모든 필드가 채워지면 모든 필드가 필요하기 때문에 다음 페이지로 연결되기를 원합니다. 나는 이것이 JavaScript를 포함 할 것이라고 생각하고 있는데 괜찮다.하지만 나는 jQuery를 피하고 싶다. 감사.

Answer 1

일반적으로 정상적인 양식 제출을 POST-Redirect-GET (서버가 양식 제출을 수락 한 다음 페이지를 리디렉션 함)으로 결합합니다. 양식 제출에 성공

<form method="post" action="/what/ever"> 
    <label>Name: <input required></label> 
    <label>Email: <input type="email" required></label> 

    <input type="submit" value="Send"> 
</form> 

Example

후 서버에서 페이지를 리디렉션 : 일반 양식 제출로

은, 당신이해야 할 모든과 같이 required 등의 필드를 표시입니다 - 다음 페이지 (또는 오류가 발생한 경우 오류 페이지)로 이동합니다.

Answer 2

폼 유효성 검사는 HTML5 required 필드를 사용하여 클라이언트 측에서 쉽게 수행 할 수 있습니다.

<input type="text" required /> 

그러나 모든 브라우저는 HTML5를 지원하지 않으며 자바 스크립트 기반 솔루션을 사용할 수 있습니다. 이것은 무한한 방법으로 구현 될 수 있습니다. 예를 들어 제출 버튼에 이벤트 리스너를 추가하여 모든 필드가 비어 있지 않은지 확인하고 제출을 금지합니다.

var form = document.forms["form-name"]; 
var formFields = form.getElementsByTagName("input"); 

form.addEventListener("submit", function (event) { 
    var validationOk = true; 
    for (var i = 0; i < formFields.length; i++) { 
     if (formFields[i].value == "") { 
      validationOk = false; 
      // Here you probably also want to give the user some kind 
      // of feedback by adding a class to the field or similar 
     } 
    } 
    if (!validationOk) { 
     event.preventDefault(); 
    } 
}); 

그러나 참고 보안 관점에서, 당신이해야 클라이언트 측 유효성 검사 결코 신뢰 것이 아니라 한 검증은 사용자 경험을 향상시키기 위해 아니므로 그것을 서버 측을한다.