Question

I have a form that contains two input textboxes, one called serial and the other called warrantyClaimId. The rules are that serial can be blank only if warrantyClaimId is also blank, and if warrantyClaimId is not blank, its data must be correlated to serial’s data in a database. That is, if there’s a warranty claim number, there has to be a corresponding validated serial number. But if there’s no warranty claim, any serial will do.

I have onchange on both inputs:

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

In checkSerial, if serial is empty and warrantyClaimId is not, I tell the user the rules and then give focus to the serial input.

In checkClaim, if serial is empty and warrantyClaimId is not, I tell the user the rules and then give focus to the warrantyClaimId input.

This results in a bit of a trapped user experience. Say the user entered legit values for both inputs. Then they decide there is no warranty claim, so they clicked again on the serial input and deleted the value. They’re trapped unless they can remember the serial number that went with the value in warrantyClaimId.

I was about to implement a change to capture the pre-edit value of the serial field so I could restore the value after chastising the user. But I thought I’d ask if anyone has a more clever solution.

Any input is appreciated. Thanks!

Answer 1

I would warn about the relation at change time but be more forceful at submit time (and do the real validation on the server, of course).