How can I change a required field from displaying an error message to highlighting it in red?

When a user fails to enter a required field on my form it's displaying the error message which is blowing out my page. How do I change this to highlight the required filed in red if not entered instead on displaying the error message?

To my understanding it appears you are having issues with your required field being forced off your page if not filled in.

I see that you seem to be using a Mac and unfortunately I can't seem to replicate this problem since I am on Win 10 even though I did try this on a Mac Emulator.

Could you please let us know what Mac OSX and Browser|Browser Version you are experiencing this issue in?

Update -

I had our iOS Dev test this for me since has a Mac with which he was able to replicate the issue to confirm it for me.

Please try injecting this extra line of css code into your form to hide the form error message to see if this will possibly help to correct the issue. The error message is appearing and that seems to shift it upwards so doing this should allow the field to be required but stay in the same spot.

Code:

.form-error-message {display: none;}

Result: