Exploring the blur() function in JavaScript through cold calling

Question

Exploring the blur() function in JavaScript through cold calling

There is a specific line of code that I need help with.

document.getElementById("firstName").addEventListener("blur", validateField);

Additionally, there is this block of code:

validateField = (event) =>
{
    const el = event.target;
}

My goal now is to invoke the validateField() function along with the corresponding element in the

form.addEventListener('submit', function(event)

section.

document.getElementById("firstName").blur(); // I am unable to make this call.

Unfortunately, directly using blur() does not seem to be effective in this case.

The main objective is to display the bootstrap is-invalid message when the form is submitted and remains invalid.

el.classList.add('is-invalid');
el.nextElementSibling.innerHTML = "This field is required";

I am aiming to avoid utilizing jQuery as I might transition this to bootstrap version 5 in the near future.

javascript bootstrap-4

Answer 1

Answer №1

It seems that when a form is submitted, the focus is removed unless the user specifically presses the enter key to submit. Perhaps an alternative method could be to set focus on another element instead of blurring the current one!

I found success with the following code:

document.getElementById("frm").addEventListener('submit', function(event) {
  event.preventDefault();
  document.getElementById("firstName").blur();
});

<form action="" id="frm">
  <input type="text" id="firstName" />
  <input type="submit" value="Press Enter" />
</form>

For an alternate solution, you can try this:

document.getElementById("frm").addEventListener('submit', function(event) {
  event.preventDefault();
  document.getElementById("frm").focus();
});

#frm:focus {
  outline: none;
  box-shadow: none;
}

<form action="" id="frm" tabindex="0">
  <input type="text" id="firstName" />
  <input type="submit" value="Press Enter" />
</form>

Answer 2

It seems that when a form is submitted, the focus is removed unless the user specifically presses the enter key to submit. Perhaps an alternative method could be to set focus on another element instead of blurring the current one!

I found success with the following code:

document.getElementById("frm").addEventListener('submit', function(event) {
  event.preventDefault();
  document.getElementById("firstName").blur();
});

<form action="" id="frm">
  <input type="text" id="firstName" />
  <input type="submit" value="Press Enter" />
</form>

For an alternate solution, you can try this:

document.getElementById("frm").addEventListener('submit', function(event) {
  event.preventDefault();
  document.getElementById("frm").focus();
});

#frm:focus {
  outline: none;
  box-shadow: none;
}

<form action="" id="frm" tabindex="0">
  <input type="text" id="firstName" />
  <input type="submit" value="Press Enter" />
</form>

Exploring the blur() function in JavaScript through cold calling

Answer №1

Similar questions

Is there ever a situation when it's acceptable to forego graceful degradation?

dirpagination fails to display all rows in the dataset

Unable to generate StumbleUpon traffic for a URL through AJAX due to the API returning text/plain

Ways to implement real-time search feature in Rails 4.2

The combination of jQuery, using .load method in javascript to prevent scrolling up, making XMLHttpRequest requests, updating .innerHTML elements, and troubleshooting CSS/JS

Angular JS: Extracting the header from a CSV file

"Utilizing VueJS XHR functionality within a versatile and reusable component

Steps for converting a tsx file into a js file in React

Accessing a peaceful API and displaying the outcome on a webpage using Node.js

Looking to retrieve the mouse coordinates using JavaScript

What are the best practices for efficiently updating JSON data in a React application?

Having trouble viewing the CSS menu on Internet Explorer 8? Could it be a potential JavaScript issue causing the problem?

Steps for converting TypeScript code to JavaScript using jQuery, without the need for extra libraries or frameworks like NPM

Create proper spacing for string formatting within an AngularJS modal

JavaScript finding items in an array

Bootstrap 4 allows for the use of the d-lg-flex class to create a flexible column layout

What is it about this JavaScript code that IE8 seems to have a problem with?

What is the correct method for calculating the sum of one input field and multiple output fields?

Is there a way to retrieve the id of a jQuery autocomplete input while inside the onItemSelect callback function?

ExtJs rich text editor for text input