javascript - 如何使用 addEventListener 进行输入验证？

Question

我正在做一个项目来练习 javascript 和 HTML 中的表单验证，我似乎无法让 addEventListener 工作。我需要 3 个来检查单击提交按钮时是否填写了所有必需的表格，一个来检查他们输入手机的输入是否正确，另一个来检查是否选择了一个单选按钮选项。我知道函数可以工作，我只是无法触发 addEventListener。以下是事件：

document.getElementById("_submit").addEventListener("click", submit(),useCapture);
document.getElementById("phone").addEventListener("input", checkInputPhone(), useCapture);
document.getElementByName("type").addEventListener("submit", checkType(), useCapture);

这里是 HTML：

<label>Phone Number: Please enter in this format-(XXX-XXX-XXXX)*required</label>
<input type="tel" id="phone" name="phone" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<p id = "_phone" name = "errorMessage"></p>
<div id="credit_type">
            <h3>Credit Card type:</h3>
            <input type="radio" id="visa" name="type" value="visa">
            <label for="visa">Visa</label>
            <input type="radio" id="master" name="type" value="master">
            <label for="master">Mastercard</label>
            <input type="radio" id="american" name="type" value="american">
            <label for="american">American Express</label>
            <p id = "_type"></p>
</div>
<button type="submit" id = "_submit">Validator</button>
<button type="buttom" onclick = "reset()">Reset</button>
        <p id="sub" name = "errorMessage"></p>

以下是功能：

function submit(){
    getAddress();
    getName();
    getCreditInfo();
    document.getElementById("total").innerHTML = total;  
}
function checkInputPhone(){
    var input = document.getElementById("phone").value;
    if(!input.checkValidity()){
        document.getElementById("_phone").innerHTML = "Not a valid input";
    }
}

function checkType(){
    var input = document.getElementByName("type").value;
    if (input == ""){
        document.getElementById("_type").innerHTML = "A type selection is required.";
    }
}

标签： javascripthtml

Answer 1

这样做的方法：

const myForm = document.forms['my-form']  // global constant for everything about the form
  ;
myForm.phone.oninvalid=_=>  // invalid event listener on name="phone" of myForm
  {
  myForm.phone.setCustomValidity('Not a valid input')
  }
myForm.type.oninvalid=_=>  // invalid event listener on name="type"
  {
  myForm.type.setCustomValidity('A type selection is required.')
  }
myForm.onsubmit=evt=>   // submit event listener is on form élément, not on the button
  {
  evt.preventDefault()  // disable form submiting (for testing here)
  
  // show values:
  console.clear()
  console.log('phone = ', myForm.phone.value )  // <-- use element form name
  console.log('type = ', myForm.type.value )
  }

<form name="my-form" >
  <label>Phone Number: </label>
  <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="XXX-XXX-XXXX" required>

  <fieldset>
    <legend>Credit Card type:</legend>
    <label> <input type="radio" name="type" value="visa"   required > Visa     </label>
    <label> <input type="radio" name="type" value="master"  > Mastercard       </label>
    <label> <input type="radio" name="type" value="american"> American Express </label> 
  </fieldset>

  <button type="submit"> Validator </button>
  <button type="reset" > Reset     </button>

</form>