HTML5 built-in validation Customized error messages without using document.getElementById?

I have two very similar HTML forms in the same web page

IMPORTANT :I am aware that the ID's are duplicated and also may change in the future. it is not my html and Unfortuntally I am not allowed to change it:( because of that I prefer not to use "document.getElementById"

so something like this...

<form class="the-form" method="post" name="global_red_form">
 <div class="form-field-type-phone">
 <label for="form-field-phone" class="the-label">phone</label>
 <input type="text" name="form_fields[phone]" id="form-field-phone" class="the-field" 
  required="required">  
 </div> 
 <div class="form-field-type-email">    
 <label for="form-field-email" class="the-label">email</label>
 <input type="text" name="form_fields[email]" id="form-field-email" class="the-field" 
  required="required">
 </div>     
 </form>


<form class="the-form" method="post" name="global_yellow_form">
<div class="form-field-type-phone">
<label for="form-field-phone" class="the-label">phone</label>
<input type="text" name="form_fields[phone]" id="form-field-phone" class="the-field" 
required="required">
</div>
<div class="form-field-type-email"> 
<label for="form-field-email" class="the-label">email</label>
<input type="text" name="form_fields[email]" id="form-field-email" class="the-field" 
 required="required">
</div>   
</form>

the forms have the html5 built-in form validation (required="required") and I want to Customize the error messages

so this is the code that does not work-asking for help

var validatePhone, i;
validatePhone = document.querySelectorAll("input[name~='phone']");
for (i = 0; i < validatePhone.length; i++) {
validatePhone[i].addEventListener("input", function (event) {
 if (validatePhone[i].validity.typeMismatch) {
   validatePhone[i].setCustomValidity("no it's not!");
  } else {
   validatePhone[i].setCustomValidity("");
  }
 });
 }

var validateEmail, i;
validateEmail = document.querySelectorAll("input[name~='email']");
for (i = 0; i < validateEmail.length; i++) {
 validateEmail[i].addEventListener("input", function (event) {
  if (validateEmail[i].validity.typeMismatch) {
   validateEmail[i].setCustomValidity("no it's not!");
  } else {
   validateEmail[i].setCustomValidity("");
  }
 });
  }