The function is not executing as expected, with no errors detected in the console log

Question

The function is not executing as expected, with no errors detected in the console log

I've been working on this function, but I'm having trouble getting it to run properly. None of my console.log messages are showing up in the console. This function is supposed to validate emails upon submission, but only for a specific domain.

function checkEmailValidity() {
  console.log('First message')

  var emailInput = document.querySelectorAll('t186__input');
  console.log('Input checked');
  var submitButton = document.querySelectorAll('t-submit');
  console.log('Submit button checked');
  submitButton.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('Click event detected');

    if (emailInput.val().indexOf('@rbc.com') !== -1) {
      return true;
      console.log('Validation successful');
    } else {
      alert("You have entered an invalid email address");
      return false;
    }

  });

}

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule" value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000;" />
  </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

javascript forms function validation

Answer 1

Answer №1

There are several errors present here that have been corrected:

1/.

There is no need for querySelectorAll
The initialization code was wrapped in a function but never called.
The querySelector was not using a . for the class modifier.

var formInput = document.querySelector('.t186__input');
console.log('input');
var formSubmit = document.querySelector('.t-submit');
console.log('submit');

formSubmit.addEventListener('click', function(e) {

  console.log('click');
  if (formInput.value.indexOf('@rbc.com') !== -1) {
    return true;
    console.log('hey2');
  } else {  
    e.preventDefault();
    alert("You have entered an invalid email address");
    return false;
  }


});

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

Additionally, a further tidy up of the code:

document.addEventListener('click', function(e) {
  if (e.target.matches('.t-submit')) {
    let regEx = /@rbc.com/;
    if (regEx.test(document.querySelector('.t186__input').value) === false) {   
      e.preventDefault(); 
      e.stopPropagation();
      alert("You have entered an invalid email address");
      return false;
    }
  }
});

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

Final touches include wrapping the code in a form and handling the submit event. It is assumed that there is a form element somewhere in the code :)

// In this example we need to wait for the DOM to be ready. 
document.addEventListener('DOMContentLoaded', () => {
  // Code in here will execute the the HTML is loaded and the DOM is ready for use.
  setUpFormListener('t_frmSubmit'); // <--- replace with your form class name
});

function setUpFormListener(frmClassName) {
  // In this demo, we bind directly to the form submit. (note we use form.[class] to ensure we only select the form
  document.querySelector(`form.${frmClassName}`)
    .addEventListener('submit', function(e) {
      let regEx = /@rbc.com/;
      if (regEx.test(document.querySelector('.t186__input').value) === false) {
        e.preventDefault();
        e.stopPropagation();
        alert("You have entered an invalid email address");
        return false;
      }
    });
}

<form class="t_frmSubmit" submit="_blank"> 

  <div class="t186__wrapper">
    <div class="t186__blockinput">
      <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
    <div class="t186__blockbutton">
      <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
    </div>
  </div>

</form>

Answer 2

There are several errors present here that have been corrected:

1/.

There is no need for querySelectorAll
The initialization code was wrapped in a function but never called.
The querySelector was not using a . for the class modifier.

var formInput = document.querySelector('.t186__input');
console.log('input');
var formSubmit = document.querySelector('.t-submit');
console.log('submit');

formSubmit.addEventListener('click', function(e) {

  console.log('click');
  if (formInput.value.indexOf('@rbc.com') !== -1) {
    return true;
    console.log('hey2');
  } else {  
    e.preventDefault();
    alert("You have entered an invalid email address");
    return false;
  }


});

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

Additionally, a further tidy up of the code:

document.addEventListener('click', function(e) {
  if (e.target.matches('.t-submit')) {
    let regEx = /@rbc.com/;
    if (regEx.test(document.querySelector('.t186__input').value) === false) {   
      e.preventDefault(); 
      e.stopPropagation();
      alert("You have entered an invalid email address");
      return false;
    }
  }
});

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

Final touches include wrapping the code in a form and handling the submit event. It is assumed that there is a form element somewhere in the code :)

// In this example we need to wait for the DOM to be ready. 
document.addEventListener('DOMContentLoaded', () => {
  // Code in here will execute the the HTML is loaded and the DOM is ready for use.
  setUpFormListener('t_frmSubmit'); // <--- replace with your form class name
});

function setUpFormListener(frmClassName) {
  // In this demo, we bind directly to the form submit. (note we use form.[class] to ensure we only select the form
  document.querySelector(`form.${frmClassName}`)
    .addEventListener('submit', function(e) {
      let regEx = /@rbc.com/;
      if (regEx.test(document.querySelector('.t186__input').value) === false) {
        e.preventDefault();
        e.stopPropagation();
        alert("You have entered an invalid email address");
        return false;
      }
    });
}

<form class="t_frmSubmit" submit="_blank"> 

  <div class="t186__wrapper">
    <div class="t186__blockinput">
      <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
    <div class="t186__blockbutton">
      <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
    </div>
  </div>

</form>

Answer 3

Answer №2

querySelectorAll('t186__input') and querySelectorAll('t-submit') are specifically searching for elements with the tags <t186__input and <t-submit.

Based on the structure of your HTML, these tags are actually classes on the elements. Therefore, you should use a class selector to target them.

querySelectorAll('.t186__input') and querySelectorAll('.t-submit')

It's important to note that querySelectorAll returns an array of nodes, so you'll need to iterate through them to access each individual element.

If you're expecting only one element with that class, consider using querySelector instead.

Lastly, you've defined the function but you're not actually calling the emailvalid function anywhere in your code.

Answer 4

querySelectorAll('t186__input') and querySelectorAll('t-submit') are specifically searching for elements with the tags <t186__input and <t-submit.

Based on the structure of your HTML, these tags are actually classes on the elements. Therefore, you should use a class selector to target them.

querySelectorAll('.t186__input') and querySelectorAll('.t-submit')

It's important to note that querySelectorAll returns an array of nodes, so you'll need to iterate through them to access each individual element.

If you're expecting only one element with that class, consider using querySelector instead.

Lastly, you've defined the function but you're not actually calling the emailvalid function anywhere in your code.

The function is not executing as expected, with no errors detected in the console log

Answer №1

Answer №2

Similar questions

Repurposing JavaScript objects after clearing their contents

Selenium and Python: Dealing with the ElementNotInteractableException when trying to input a value in a td element

Invoking a C++ dll in the renderer process of a Node.js application with Electron using node ffi

Is there a way to bring in a variable from the front end script?

Unable to activate primary error handler in my Node.js Express application

Ways to expand a Bootstrap input field by clicking on it:

The error message thrown in Node.js: "Cannot access 'filename' property of undefined object"

having difficulty showing the column filter feature in the DataTable

"Troubleshooting: Next.js useEffect and useState hooks fail to function properly in a

Getting js.map Files to Function Properly with UMD Modules

ngmodelchange activates when a mat-option is chosen in Angular Material

Syntax rules for JSON schema

Utilizing Kendo UI Jsonp in conjunction with a WordPress json plugin: A comprehensive

Is it possible for the 'error' attribute to be deemed invalid or inappropriate within ajax?

Prevent a function from executing using ClearTimeout()

The unexpected token "[ ]" was encountered while assigning a numerical value to an array

What is the best way to retrieve a file using XMLHTTPRequest and Ajax?

Develop a precompiled library for Angular applications that utilizes Ahead-of-Time (AOT) compilation technology

Ensure that the HTML input only accepts numbers and email addresses

When using form.serialize() in Django forms, an empty object is being sent