HTML 양식이 특정 순서로 작성되었는지 확인 하시겠습니까?

Question

사용자가 데이터를 입력 할 때 계산을 실시간으로 수행하는 양식이 있습니다. 그러나 일부 계산에서는 특정 필드를 먼저 채워야합니다. 내가 4 개 필드를 가지고 있고, 필드 4 필드 1의 비율 인 경우 예를 들어

, 나는 그들이 필드에 데이터를 입력 할 수 있습니다 전에 사용자가 필드 1의 값을 가지고 있는지 확인해야합니다 4.

한 가지 생각은 각 필드에 일련 번호가있는 데이터 단계 특성을 제공하는 것입니다. 폼이 처음 나타나면 첫 번째 필드를 제외한 모든 필드가 비활성화됩니다. 첫 번째 필드에 유효한 데이터가 입력되면 다음 단계의 필드가 활성화됩니다. 또한 사용자가 필드 1을 비우면 나머지 필드가 지워지고 다시 비활성화되는 것으로 가정합니다.

이 솔루션은 효과가있을 것이라고 확신하지만 제대로 작동하는지, 서버 측 유효성 검사를 위해서는 상당한 양의 JS 코드 (jQuery)가 필요합니다. 그러나 제가 약간 의문을 품는 하나의 "잡았다"는 것은 제출 및 서버 측 유효성 검사가 실패하고 양식을 다시 렌더링하는 방법, 양식 필드의 비활성/활성 상태를 유지하는 방법입니다. 그러나 나는 현재의 문제 이후에 그 문제를 다루겠다.

문제는 이것이 순차적으로 기입해야하는 양식 문제에 대한 적절한 해결책입니까? 다른 사람이 구현하려는 계획보다 더 나은 해결책이나보다 세련된 방법을 찾았습니까? 나는 일반 개념이나 아이디어로 괜찮습니다. 필요한 코드를 꽤 많이 코딩 할 수 있습니다.이 특정 문제에 대한 모범 사례가 확실하지 않습니다.

Answer 1

주문을 확인할 필요는 없지만 틀린 양식 (예 : 필드 4는 채워지고 필드 1은 그렇지 않음)을 제외해야합니다.

사용자가 원하는 것을 입력 할 수있게 해주는 것은 사용자가 원하는대로 입력 할 수있게 해주는 것이지, 빈칸이있는 한 필수 입력란을 강조 표시하고 모든 것이 올 때까지 양식을 제출하지 못하게하는 것입니다.

Answer 2

당신이 제안하는 것은 이것을하는 좋은 방법입니다. JS 코드는 그다지 크지 않을 것입니다. 필드에서 클래스 이름을 사용하여 어떤 클래스가 활성 클래스인지 판별 할 수 있습니다. 일부 JS 변수 또는 숨겨진 필드를 언제든지 전달하여 서버 쪽 유효성 검증 후 활성화 된 페이지를 알릴 수 있습니다.

Answer 3

왜 클라이언트 측에서 값을 확인하지 않습니까? 생각했던 것처럼 프로세스하십시오. 입력에 onchange 이벤트 처리기를 설정하고 처리기에서 값의 유효성을 검사합니다. 올바른 경우 다음 입력을 사용하도록 설정합니다. 올바르지 않으면 현재의 불만 사항이 그대로 유지됩니다. 몇 줄의 스크립트 만 있으면됩니다.

Answer 4

 if(option1 == "" && option2 != "") 
     { 
      alert("Please fill options in a Sequence"); 
     } 
     else if(option2 == "" && option3 != "") 
     { 
      alert("Please fill options in a Sequence"); 
     } 
     else if(option3 == "" && option4 != "") 
     { 
      alert("Please fill options in a Sequence"); 
     } 
     else if(option4 == "" && option5 != "") 
     { 
      alert("Please fill options in a Sequence"); 
     }