"Alert box displaying error message is not appearing on the screen

In order to display an error message using a tooltip, I have hidden the tooltip by setting the style of a span with an id of demo to display:none. Then I use JavaScript's getElementById method to retrieve the value of the input field with an id of userverify to check if it is empty or not. If the value is empty, I set the display property to block and change the innerHTML of the demo element.

function validateForm() {
  var x = document.getElementById("userverify").value;
  var y;
  if (x == "" || x == null) {
    y = document.getElementById("demo").styleDisplay = "block";
    document.getElementById("demo").innerHTML = y + "<h1>Empty Username</h1>";

  }
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
<form action="" method="" name="">
  <br>
  <br>
  <br>
  <label>Username</label>
  <div class="tooltip">
    <input id="userverify" class="" type="text" name="username">
    <span class="tooltiptext" id="demo" style="display:none">Tooltip text</span>
  </div>
  <input onclick="validateForm()" type="submit" name="submit" value="Submit">

</form>

javascripthtmlcsstooltip

Answer №1

Initially

let element = document.getElementById("demo").style.display = "block";

This initial code is incorrect, you should use style.display instead.

Also, the tooltip in your second snippet has properties visibility:hidden and opacity:0 that need to be changed along with display.

Snippet from Stack Overflow:

function validateForm() {
  var x = document.getElementById("userverify").value;
  var y = document.getElementById("demo");
  if (x == "" || x == null) {
    y.style.display = "block";
    y.style.visibility = "visible";
    y.style.opacity = "1";
    y.innerHTML = "Please enter a username";

  }
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
<form action="" method="" name="">
  <br>
  <br>
  <br>
  <label>Username</label>
  <div class="tooltip">
    <input id="userverify" class="" type="text" name="username">
    <span class="tooltiptext" id="demo" style="display:none">Enter your username here</span>
  </div>
  <input onclick="validateForm()" type="button" name="submit" value="Submit">

</form>

Answer №2

Make sure to update your code with the following changes. Instead of placing the validateForm() function on the submit button, it should be tied to the form element's onSubmit event. By adding onsubmit="return validateForm()", the submission will now rely on the return value of the validateFrom() function.

function validateForm(){

        var x = document.getElementById("userverify").value;
        var y = document.getElementById("demo");
        if(x == "" || x == null){
       y.style.display = "block";
       y.innerHTML = "Empty Username";    
       y.style.visibility = "visible";
       y.style.opacity = "1";
       return false;
        }
        else
        {
            y.style.display = "none";
        }
        
        return true;
}
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    }
<form action="#" method="" name="" onsubmit="return validateForm()">
  <br>
  <br>
  <br>
   <label>Username</label>  
     <div class="tooltip">
         <input id="userverify" class="" type="text" name="username"> 
          <span class="tooltiptext" id="demo" style="display:none;">Tooltip text</span>
     </div>
        <input type="submit" name="submit" value="Submit">
                        
                        </form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the query count in a MongoDB collection using Node.js

Exploring the world of MongoDb, I have embarked on a project to create a small phonebook application. This application allows users to add and remove entries with a name and phone number. While I have successfully implemented the functionality to add and d ...

javascriptnode.jsmongodbexpress

What is the best way to assign an object variable within an array state?

My current state looks like this: const [tags, setTags] = useState([{id: 1, label: "random"}, {id: 2, label: "important"}]) const [input, setInput] = useState("") const [selectedTag, setSelectedTag] = useState([]) In addition ...

javascriptreactjsreact-typescript

Error in GatsbyJS: Unable to retrieve data from property 'childImageFluid' due to undefined value

Currently tackling a Gatsby website, but running into an issue: "TypeError: Cannot read property 'childImageFluid' of undefined" Here's the code snippet from my Project.js file: import React from "react" import PropTypes from &quo ...

javascriptreactjsgatsbygatsby-image

Tips for monitoring a variable within a Service using a Controller to trigger a modal?

http://plnkr.co/edit/bdHiU0?p=preview When I require a variable that is returned by a service, like the data in InitTickersFactory.returnTickers(), I can easily assign it to vm.tickersObject. However, in the plnkr example provided above, I am simply toggl ...

javascriptangularjsangularjs-directiveangularjs-service

Guide to presenting fields on a distinct line or section in Angular 7 forms

I would like to arrange the username area and password area on separate lines with spaces in between. Here is the HTML code snippet: This HTML code is for a login angular GUI. <mat-card class="card"> <mat-card-content> <!-- CONT ...

htmlangularforms

React-bootstrap's Modal is glitching and only partially appearing on the screen

I am a beginner in frontend development and I've been struggling to position the modal at the center of the screen; it keeps appearing on the right side. I am currently using "bootstrap/dist/css/bootstrap.min.css" for my CSS. Should I create a new CSS ...

htmlcssreactjs

Determine if the "Enter" key has been pressed and validate the

How can I implement Enter key press functionality to login to the system using JavaScript? Below is the code snippet: @using (Html.BeginForm("Login", "InventoryBarcode", FormMethod.Post, new { id = "main" })) { <label for="LoginName" class="uname ...

javascriptmodel-view-controller

Empty canvas when Material UI Modal transitions states

I've been struggling to make a simple modal using material UI, but every time I try to change the state, it just shows a blank white page. Can anyone help me figure out why this is happening? Here's the code snippet: import {Button,Modal} fro ...

javascriptreactjsmaterial-ui

Text box is not automatically filling up when selecting from dropdown menu

I am currently facing an issue with a dropdown box that offers three different selections. I want the Group ID associated with the selected group to automatically populate in the textbox below. How can I achieve this functionality? Whenever I make a selec ...

javascriptphphtmlsql-serverdrop-down-menu

JQuery loader & amazing animations

I have implemented the wow.js plugin along with a jQuery preload tutorial from here. Although the preloader works fine, I am facing an issue where the animation by wow.js starts before all the elements on the page are preloaded. I am looking to modify my ...

javascriptjquerywow.js

Text positioned in the center alongside an image, or if there is limited space, it will be aligned to

Take a look at this code snippet: img { float: left; } #inner { height: 128px; background-color: yellowgreen; display: table-cell; vertical-align: middle; } #content { background-color: red; } <img src="http://cdn.memegener ...

htmlcss

Automating testing for numbered lists with CSS list-style-type decimal

I need help with a JavaScript and CSS project. I have a situation where I have a numbered list like this: Coffee Tea Cola Here is the code structure I am using: <!DOCTYPE html> <html> <head> <style> ul.a {list-style-type ...

htmlcssseleniumui-automation

The md-autocomplete feature showcases search results in a list format rather than a dropdown menu

Currently, I am working on implementing the Angular Material md-autocomplete tag to provide suggestions for zip codes in a form. To achieve this, I have set up an asynchronous service that fetches the suggestions and populates the results. My reference poi ...

htmlangularjsangular-materialangular-ui-bootstrapmd-autocomplete

Executing a function by clicking on a DIV with the value of a textbox, instead of clicking directly on the textbox

Here is a function I have: $("#border-radius").click(function(){ var value = $("#border-radius").attr("value"); $("div.editable").click(function (e) { e.stopPropagation(); showUser(value, '2', this.id) $(this).css( ...

javascriptjqueryjquery-selectors

How can I use CSS to make a child element in a grid layout stretch horizontally to full width?

I am currently working on designing a grid layout that will display a child element when clicked. Here is what I have in mind: [ link1 ] [ link2 ] [ link3 ] [ link4 ] [ link4 ] [ link4 ] When clicked, it will turn into: [ link1 ] [ link2 ] ...

cssflexboxcss-grid

Issues arise when attempting to make a SOAP request in NodeJS, as opposed to PHP where it functions seamlessly

As I work on integrating a SOAP-API to access data, I encounter an error when trying to implement it in my ExpressJS-Service using NodeJS. The API documentation provides examples in PHP, which is not my preferred language. My PHP implementation works flawl ...

javascriptphpnode.jsexpresssoap

The pop-up in the navigation bar imported from another source is malfunctioning

I'm in the process of constructing a website with a navigation bar that I'm importing from another HTML file, like this: Navbar HTML <nav class="navbar fixed-top navbar-expand-lg bg-dark navbar-dark"> <a class="navbar-brand" href="in ...

jqueryhtmlbootstrap-4navbarpopover

Creating a vertical triangle pointing to the right as the border of a div element

Currently, I'm working on a mockup that includes the following elements. I am attempting to ensure that the triangular right end of the "Delay Your Payments" div matches the mockup exactly. To achieve this, I aim to use CSS without relying on sliced ...

css

Pinia: Is it better to invoke '{myStore}' or 'return myStore' within the return statement?

I'm currently working on integrating a Pinia store into a component of my Vue app and I'm puzzled by the need to return the store in { } instead of just returning it as is. Can someone clarify the distinction between return {foo} and return foo f ...

javascriptvue.jsvue-composition-apipinia

I have to ensure that a plugin is only loaded once its dependency has been loaded with RequireJS

Currently, I am utilizing the jquery.validationEngine.js plugin and facing an issue. It seems that jqueryValidateEnglish is unable to function properly unless jqueryValidateEngine is loaded beforehand. In my code for jquery.wrapped.validationEnglish2.js, ...

javascriptjqueryjquery-pluginsrequirejs