наилучшая практика для пользовательского интерфейса, где должны быть связаны два поля ввода?

Question

У меня есть форма, которая содержит два поля ввода, одно из которых называется serial, а другое - warrantyClaimId. Правила заключаются в том, что серийный номер может быть пустым только , если GuaranteeClaimId также пуст, и если гарантированныйClaimId не пуст, его данные должны быть сопоставлены с данными серийного номера в базе данных. То есть, если есть номер претензии по гарантии, должен быть соответствующий подтвержденный серийный номер. Но если претензий по гарантии нет, подойдет любой серийный номер.

У меня есть onchange на обоих входах:

<input id="serial" type="textbox" onchange="checkSerial(this.value);" />
<input id="warrantyClaimId" type="textbox" onchange="checkClaim(this.value);" />

В checkSerial, если серийный номер пуст, а GuaranaClaimId нет, я сообщаю пользователю правила и затем фокусируюсь на последовательном входе.

В checkClaim, если серийный номер пуст, а GuaranaClaimId нет, я сообщаю пользователю правила, а затем фокусируюсь на вводе GuaranteeClaimId.

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

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

Любой вклад приветствуется. Спасибо!

Answer 1

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

Другими словами, сделай это.

<input id="serial" type="textbox" onchange="checkSerial(this.value);" />
<input id="warrantyClaimId" target="serial" type="textbox" onchange="checkClaim(this.value);" />

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

Надеюсь, что это поможет!

Answer 2

Я бы предупреждал об отношении во время изменения, но был бы более настойчивым во время отправки (и, конечно, выполнял бы реальную проверку на сервере).