How to use addEventListener for input validation?

Question

I am working on a project to practice form validation in javascript and HTML and I can't seem to get the addEventListener to work. I need 3 one to check if all required forms are filled when the submit button is clicked, one to check if the input they put into the phone is correct, and another to check that the choose one of the radio button options. I know functions work, I just can't get the addEventListener to trigger. Here are the events:

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

Here are 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>

and here are the functions:

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.";
    }
}

I would check that you're adding these event listeners after the document is ready. With the information given, I would assume that your JavaScript is trying to access those DOM elements before they have been loaded in. Alternatively, you might need to prevent the default form submit when calling your submit function. — Ibz, Nov 08 '20 at 03:12
How would I check that? I have them in an external js file that is linked in the head. — dc62, Nov 08 '20 at 03:13
when you add a function to an event listener by its name, dont use parens. Should be `.addEventListener("click", submit, ` not `.addEventListener("click", submit(), ` — chiliNUT, Nov 08 '20 at 03:13
For checking if the document is ready, you could use this: `document.addEventListener("DOMContentLoaded", function(event) { // add all the listeners here });` But it's possible you don't need this, try what @dc62 suggested first, and as Mister Jojo said, make sure your input fields are wrapped inside
tags — Ibz, Nov 08 '20 at 03:21
So I added the form and it helped but the events aren't activating the functions and I dont think the events are triggering @Ibz — dc62, Nov 08 '20 at 03:33
`document.getElementByName` doesn’t exist. Even if you meant `document.getElementsByName`, please see [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/q/10693845/4642212). — Sebastian Simon, Nov 08 '20 at 03:49
ya do I have to get the values out of the input before it is submitted or can I do that when it is submitted? @Ibz — dc62, Nov 08 '20 at 05:23

Mister Jojo · Answer 1 · 2020-11-08T14:01:15.087

the way to do that:

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>

How to use addEventListener for input validation?

1 Answers1