On click function is not defined and i dont know why

Question

I have to validate an email and a phone. It is not necessary that both are mandatory, just one is enough. When i click my button, the code error is that handleValidation is not defined, but i do not why. Even the console don't print the console.log.

Here the HTML:

        <form class="form-group p-4">

        <div class="row">
            <div class="col-12 col-md-6 d-flex flex-column">
                <input type="text" class="form-control rounded-0 p-3 m-1" id="name" required
                    placeholder="NOMBRE Y APELLIDO">
                <input type="email" class="form-control rounded-0 p-3 m-1" id="email" placeholder="E-MAIL">
                <input type="tel" class="form-control rounded-0 p-3 m-1" id="phone" placeholder="TELÉFONO">
            </div>
            <div class="col-12 col-md-6 d-flex flex-column">
                <textarea id="message" class="form-control rounded-0 h-100 p-3 m-1" required
                    placeholder="DEJANOS TU MENSAJE"></textarea>
            </div>
        </div>

        <div class="row">
            <div class="col-12 col-md-3 d-flex flex-column float-right align-items-end">
                <button onclick="handleValidation()" id="send-btn"
                    class="main-btn btn btn-primary col-12 rounded-0 p-2 mt-3">ENVIAR</button>
            </div>
        </div>
    </form>

and here the JS:

let email = document.querySelector("#email");
let tel = document.querySelector("#phone");


const emailVal = () => {
  if (!(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(email))) {
    console.log("bad")
    return false;
  }
  console.log("good")
  return true;
}


const telVal = () => {
  if (!(/^\d{9}$/.test(tel))) {
    console.log("bad")
    return false;
  }
  console.log("good");
  return true;
}


const handleValidation = () => {
  if (emailVal() === true || telVal() === true) {
    alert("tu consulta fue enviada satisfactoriamente");
  } else {
    alert("el email y/o el teléfono son necesarios para contactarte");
  }
}

if you use `function handleValidation () {` - does it work? `const` and `let` do not work the same in the global scope as `function` and `var` - in other words, using `onclick=foo` would need a `foo` function in global scope i.e. `window.foo`, to work - `const`, `let` and `class` for that matter don't add to the global (window) object - https://stackoverflow.com/questions/38452697/what-is-the-proper-to-write-a-global-const-in-javascript-es6/51923076 — Jaromanda X, Sep 29 '20 at 23:19

score 1 · Answer 1 · answered Sep 29 '20 at 23:40

Set an event listener in the script instead of onclick attribute
You do not get the values of the inputs but the inputs
Input values should be grabbed into the validations functions, not outside
Your email regex doesn't seems to work (I didn't check the phone number one)

If you correct all this problems, your script should look like that :

const emailVal = () => {
  let email = document.querySelector("#email").value;  
  if (!(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email))) {
    console.log("bad email")
    return false;
  }
  console.log("good")
  return true;
}

const telVal = () => {
  let tel = document.querySelector("#phone").value;
  if (!(/^\d{9}$/.test(tel))) {
    console.log("bad tel")
    return false;
  }
  console.log("good");
  return true;
}

const handleValidation = () => {
  if (emailVal() || telVal()) {
    alert("tu consulta fue enviada satisfactoriamente");
  } else {
    alert("el email y/o el teléfono son necesarios para contactarte");
  }
}

document.getElementById('send-btn').addEventListener('click', handleValidation);

You will also have to remove your button onclick attribute of course. Source for email validation regex : https://www.w3resource.com/javascript/form/email-validation.php

You're welcome, don't hesitate to mark the answer as accepted if it helped you. — Joulss, Oct 01 '20 at 08:53

score 0 · Answer 2 · answered Sep 30 '20 at 00:55

I checked your code in jsfiddle. I receive very time "el email y/o el teléfono son necesarios para contactarte". So code is correct to some extends. I suggest add the JSSript after the html and vice versa. I'm mixing this all time up.

On click function is not defined and i dont know why

2 Answers2