You should receive a deployment error if you specify the required attribute in that way. See the error I received trying to do the same thing you have in your example:
LWC1037: To set a boolean attributes, try <lightning-input-field required> instead of
<lightning-input-field required="true">. If the attribute is present, its value must
either be the empty string or a value that is an ASCII case -insensitive match for the
attribute's canonical name with no leading or trailing whitespace.
I would recommend changing your attribute to only "required" (see below), verify that it deploys, and then test.
<lightning-input-field field-name="Api Name" required></lightning-input-field>
What is the data type of the field? That could also be a factor if it's a picklist. Only the following HTML tags will obey the required attribute in a form:
Worst case scenario, you may have to do write your own validation.
EDIT: If you need to do your own validation, you need to add the logic to your
onsubmit event handler,
handleSubmit(). The handleSubmit method returns
true if you want the submit to continue forward or
false if you need to stop it for whatever reason. So your handleSubmit will look something like this:
// do your validation here
// use .focus() to focus in on fields that need addressed
// I like to iterate over the fields here so that you can
// 1) apply focus to the first problem element and
// 2) put error styling on every other problem element
// 3) amass a collection of error messages to show or use in other rules
// .checkValidity() is a helpful method for checking HTML5 fields
// against specific patterns you may have set in the markup.