best practice for UI where two input boxes must be related?

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. 开发者_Go百科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!

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).

I would hate to suppose that this is the best way. However, I have made the id of the first the target of the second. That way, they are related.

In other words, do this.

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

The target of the second one is the id of the first. They are essentially related that way. From there I am able to look from one to the other.

Hope this help!