包含2个文本字段中的1个的JavaScript和HTML表单需要输入

Question

所以我正在制作一个注册表单并在注册表单中我需要用户将输入放入2个文本字段中的一个，我已经有一个代码需要一个字段的文本但是我需要扩展这个代码为它能够检查2个字段。

下面是我拥有相应HTML的代码示例。 我希望新代码检查的字段称为“ctt”和“bcn”。

我通常不善于解释所以如果有人需要我进一步解释我试图做什么，请不要犹豫。

{
	var username = document.querySelector('input[name="username"]');
username.setCustomValidity('Please enter a user name, minimum length of 2 characters, maximum 32 characters');

username.addEventListener('input', function () {
  
  if (this.value.trim() === '') {
    this.setCustomValidity('Please enter a user name, minimum length of 2 characters, maximum 32 characters');
  }
  else {
    this.setCustomValidity('');
  }
}, false);

username.addEventListener('invalid', function () {
  if (this.value.trim() !== '') {
    this.setCustomValidity("Please enter a user name, minimum length of 2 characters, maximum 32 characters");
  }
}, false);
	}

<div class="group">
        <div class="col-1">
            <label for="username">Username*</label>
        </div>
        <div class="col-2">
            <input type="text" name="username" id="username" minlength="2" maxlength="32" placeholder="username"  required/>
			<span class="validity"></span>
        </div>
    </div>

我希望代码读取的输入字段如下

<!-- CTT Number -->
<div class="group">
    <div class="col-1">
        <label for="ctt">CTT Number</label>
    </div>
    <div class="col-2">
        <input type="text" id="ctt" name="ctt" pattern="[0-9]{8}" maxlength="8" placeholder="CTT Number" />
        <span class="validity"></span>
    </div>
</div>
<!-- BC Number -->
<div class="group">
    <div class="col-1">
        <label for="bcnum">BC Number</label>
    </div>
    <div class="col-2">
        <input type="text" id="bcn" name="bcn" pattern="[0-9]{8}" maxlength="8" placeholder="BC Number"  />
        <span class="validity"></span>
    </div>
</div>