Обеспечение заполнения HTML-формы в определенном порядке?

Question

У меня есть форма, которая выполняет вычисления в реальном времени, когда пользователь вводит данные.Однако некоторые вычисления требуют, чтобы некоторые поля были заполнены первыми.

Например, если у меня есть 4 поля, а поле 4 представляет собой процент от поля 1, я должен убедиться, что у пользователя естьзначение для поля 1, прежде чем они смогут вводить данные в поле 4.

Одна мысль, которую я имею, состоит в том, чтобы дать каждому полю атрибут шага данных с порядковым номером.Когда форма появляется впервые, все поля отключены, кроме первого поля.Когда в первое поле вводятся действительные данные, поля для следующего шага активируются.Это также предполагает, что если пользователь затем отключит поле 1, то остальные поля будут затем отключены и снова отключены.

Я почти уверен, что это решение будет работать, но потребует приличного количества JSкод (jQuery) для обеспечения его правильной работы, а также проверки на стороне сервера.Но есть одна «хитрость», о которой я немного озадачен: если вы выполняете отправку, а проверка на стороне сервера завершается неудачно, и вы снова визуализируете форму, как сохранить отключенное / включенное состояние полей формы?Но, думаю, я займусь этой проблемой после текущей.

Итак, вопрос в том, является ли это достойным решением проблемы форм, которые необходимо заполнять последовательно?Кто-нибудь еще нашел лучшее решение или более элегантный метод, чем то, что я планирую реализовать?Я в порядке с общими понятиями или идеями;Я могу в значительной степени кодировать все, что мне нужно, я просто не уверен в наилучшей практике для этой конкретной проблемы.

Answer 1

Похоже, вам не нужно проверять заказ, а нужно исключить случаи, когда заполненная форма неверна (например, поле 4 заполнено, а поле 1 нет).

Я предлагаю вамчтобы позволить пользователю вводить все, что он хочет, но выделять обязательные поля, пока они пусты, и предотвращать отправку формы, пока все не будет правильно.

Answer 2

То, что вы предлагаете, является хорошим способом сделать это. Код JS не будет таким огромным. Вы можете использовать имена классов в полях, чтобы определить, какой из них является активным. Вы всегда можете передать некоторые переменные JS или скрытое поле, чтобы сообщить странице, которая активна после проверки на стороне сервера.

Answer 3

      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");
      }

Answer 4

Почему бы не проверить значения на стороне клиента? Процесс, как вы и думали. Установите обработчик событий onchange на свои входы, и в обработчике подтвердите значение Если правильно, включите следующий ввод, если неверно, существующие отклонения останутся. Требуется всего несколько строк сценария.