Making mandatory text boxes obvious

Here’s a quick and simple way to put a red border on a text box that’s mandatory but hasn’t been completed:

In Theme, Assets, go to ‘Configure roles…’, add a new role and add ‘TextBox’ to its component types. I called mine ‘mandatory-textbox’

Add two entries to ‘theme.css’:

.anvil-role-mandatory-textbox:placeholder-shown {
  border: 1px solid red;
}

.anvil-role-mandatory-textbox:-ms-input-placeholder {
  border: 1px solid red;
}

The second entry is to make this work on Internet Explorer and it has to be a separate entry in order to work.

Now, for any mandatory text box, ensure that the ‘placeholder’ property has some content and it will have a red border if the placeholder text is displayed.

Great @owen.campbell! I also did something similar using roles in the last couple of days.

My CSS entry:

.anvil-role-glowing-red-border {
    outline: none;
    border-color: red;
    box-shadow: 0 0 10px red;
} 

which gives this effect:

43

But I then implemented a load of logic that checks the fields on change etc. and applies / removes the role on the component accordingly.

So I’m now going to take your approach using the placeholder bits and merge that into mine (and delete some code yay!) :slight_smile:

1 Like