There seems to be a problem with the jQuery keyup function. Currently, when data is entered into one field, errors in all other fields are hidden. However, the desired behavior is to show or hide only the error message for the specific field being interacted with.
$('#trexright input').keyup(function() {
if ($(this).val().length != 0) {
$('.field_error').hide();
} else {
$('.field_error').show();
}
});#trexright p,
.form_field input {
width: 100%;
}
#trexright span {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="trexright">
<p class="form-row">
<label for="first_name" class="">First Name</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="first_name_class" name="first_name" id="first_name_id" placeholder="First name" value="">
</span>
<span class="field_error">This field is required.</span>
</p>
<p class="form-row">
<label for="last_name" class="">Last Name</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="last_name_class" name="last_name" id="last_name_id" placeholder="Last name" value="">
</span>
<span class="field_error">This field is required.</span>
</p>
<p class="form-row">
<label for="location" class="">Location</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="location_class" name="location" id="location_id" placeholder="Location" value="">
</span>
<span class="field_error">This field is required.</span>
</p>
</div>