Tips on altering the standard message requesting an email address with an @ symbol included

Question

Tips on altering the standard message requesting an email address with an @ symbol included

I want to modify the error message displayed when an invalid email is entered, but I am unable to access the source code.

I believe the source code triggers setCustomValidity based on the appearance of the error message. Here is the relevant element:

<input type="email" value="" name="customer[email]" id="email" class="large" size="30">

The only way I can make changes is by using external JavaScript or CSS files.

There are two approaches I'm considering:

Solution 1: Adding inline HTML elements with JavaScript to achieve something like this:

<input type="email" value="" name="customer[email]" class="large" size="30" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')">

As a newcomer to JS, I'm struggling with implementing HTML in an external JS file.

Solution 2: Calling the oninvalid and setCustomValidity DOM methods in error_message.js like this:

function emailValidity(){
    var myInput = document.getElementByName("customer[email]");
    myInput.oninvalid = function() { 
                (errorMessage) 
            };
    function errorMessage(){
        myInput.setCustomValidity("hey! the email isn't right");
    }
}

However, even after including this file, it still doesn't change the default error message!

Any assistance would be greatly appreciated. Thank you in advance.

javascript html css

Answer 1

Answer №1

It is imperative that you remember to invoke the reportValidity method on the specified element, as failing to do so will result in no action being taken.

Learn more about HTMLObjectElement.setCustomValidity here

function checkValidity(input) {

  var validityStateObj = input.validity;

  console.log(validityStateObj)

  if (validityStateObj.typeMismatch) {
    input.setCustomValidity('This does not appear to be a valid email address!');
    input.reportValidity();
  } else {
    input.setCustomValidity('');
    input.reportValidity();
  }
}

document.querySelector('#email').addEventListener('blur', e =>
  checkValidity(e.target)
)

<input type="email" value="" id="email">

Answer 2

It is imperative that you remember to invoke the reportValidity method on the specified element, as failing to do so will result in no action being taken.

Learn more about HTMLObjectElement.setCustomValidity here

function checkValidity(input) {

  var validityStateObj = input.validity;

  console.log(validityStateObj)

  if (validityStateObj.typeMismatch) {
    input.setCustomValidity('This does not appear to be a valid email address!');
    input.reportValidity();
  } else {
    input.setCustomValidity('');
    input.reportValidity();
  }
}

document.querySelector('#email').addEventListener('blur', e =>
  checkValidity(e.target)
)

<input type="email" value="" id="email">

Answer 3

Answer №2

To ensure proper validation, make sure to add event listeners for both the input and invalid events in a similar manner.

const input = document.querySelector('input');
input.oninput = () => input.setCustomValidity('');
input.oninvalid = () => input.setCustomValidity('Please Enter valid email');

<form>
<input type="email" value="" name="customer[email]" class="large" size="30">
</form>

Answer 4

To ensure proper validation, make sure to add event listeners for both the input and invalid events in a similar manner.

const input = document.querySelector('input');
input.oninput = () => input.setCustomValidity('');
input.oninvalid = () => input.setCustomValidity('Please Enter valid email');

<form>
<input type="email" value="" name="customer[email]" class="large" size="30">
</form>

Answer 5

Answer №3

Your previous code encountered issues because it was not enclosed in a form element. A form is essential for checking inputs and displaying error messages when necessary, so I made sure to include that aspect.

Furthermore, there was a mistake with getElementByName instead of getElementsByName, which should be followed by [0] for selecting the specific element.

Additionally, you were attempting to set validity every time the user submitted the form, whereas it only needed to be done once.

Here's an updated version for you to try out:

var myInput = document.getElementsByName("customer[email]")[0];
myInput.oninvalid = function() {
  myInput.setCustomValidity("Hey! the email isn't right")
};

<form>
  <input type="email" name="customer[email]" id="email" class="large" size="30">
  <input type="submit" onsubmit="emailValidity()">
</form>

Answer 6

Your previous code encountered issues because it was not enclosed in a form element. A form is essential for checking inputs and displaying error messages when necessary, so I made sure to include that aspect.

Furthermore, there was a mistake with getElementByName instead of getElementsByName, which should be followed by [0] for selecting the specific element.

Additionally, you were attempting to set validity every time the user submitted the form, whereas it only needed to be done once.

Here's an updated version for you to try out:

var myInput = document.getElementsByName("customer[email]")[0];
myInput.oninvalid = function() {
  myInput.setCustomValidity("Hey! the email isn't right")
};

<form>
  <input type="email" name="customer[email]" id="email" class="large" size="30">
  <input type="submit" onsubmit="emailValidity()">
</form>

Answer 7

Answer №4

Here is the solution that worked for me:

customAnswer.js

document.addEventListener("DOMContentLoaded", function(event) {
  // Original text: "Fill out this field."
  var validateElements1 = document.querySelectorAll('input#username, input#password');

  if (validateElements1.length > 0) {    
    for (var x = 0; x < validateElements1.length; x++) {
      validateElements1[x].setAttribute("oninvalid","this.setCustomValidity('Complete este campo.')");
      validateElements1[x].setAttribute("oninput","this.setCustomValidity('')");
    }
  }
});

Answer 8

Here is the solution that worked for me:

customAnswer.js

document.addEventListener("DOMContentLoaded", function(event) {
  // Original text: "Fill out this field."
  var validateElements1 = document.querySelectorAll('input#username, input#password');

  if (validateElements1.length > 0) {    
    for (var x = 0; x < validateElements1.length; x++) {
      validateElements1[x].setAttribute("oninvalid","this.setCustomValidity('Complete este campo.')");
      validateElements1[x].setAttribute("oninput","this.setCustomValidity('')");
    }
  }
});

Tips on altering the standard message requesting an email address with an @ symbol included

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the process for submitting data to an API through a ReactJS website?

What is the best way to retrieve the name of an element or component using JavaScript

Modify the `<link>` tag using the `onclick` function in JavaScript

Add small pieces of content to CKEditor

Adjusting the view with a sliding tool

Shifting the form to the bottom right corner

Styling radio buttons with customized CSS borders

Construct object in JavaScript recursively

Modify the font style of numbers based on the keyboard language selected by the user

Having trouble implementing a Font Awesome icon into a submit button programmatically

`"Error code 404 - Slash command not found" encountered in discord.js version 12.5.3 while attempting to delete slash commands. This issue has been resolved."`

Can I safely refresh the browser during integration test specifications?

Combine two JSON objects which share a common attribute

during implementation of ng-repeat directive with JSON dataset

Flex basis unexpected vertical overflow is not anticipated

Trouble with jQuery call in an external JavaScript file?

Update the value of a td element when a select option is changed in another td element within the same table row

Error encountered: "Jest error - TypeError: Unable to access property 'preventDefault' because it is undefined."

Closing Browser Tabs with Javascript or jQuery

Is it possible for a kraken.js backend to manipulate the content of a webpage?