I do not find the client's requirement is correct. Because, when you have configured validation(either field or page level), then on click on submit button the processing will not proceed if the values are not meeting as per the validation condition(s). Prompting the user to correct the field(s). For example: User has set the ID field as required, kept the field empty and clicks on the submit. This shows validation message for required field and prompting to correct the values of the field.
How about specifying Edit input rule for the property? For example: User needs ID field to be containing only letters and digits, then specify the Edit input rule(pxLettersAndNumbersOnly). If user enter E123A$46 in ID field, the processed value post edit will be E123A46.
Use the below approach and let us know if this helps :)
Don't use client side validations for required, instead use css to show Required icon (if that is needed). Create a validate rule for the same with the message you desired on FirstName property. And also update some temporary/transient property on work page for holding a flag to know if it is already submitted once. Use this flag also while validating for FirstName property.
You can Save as the label style in Skin rule with some name and add additional styles (under Additional styles area) to specify a required icon (you can copy the styles from iconRequiredRight css class which is used for Pega's regular required icon).
Then use this new format and see if it works for you.
P.S : You might have to twist the css styles a bit as I am not sure if they will work as it is.