Show a pop-up notification when the user enters invalid input using HTML, JavaScript, CSS, and AngularJS

My HTML input field has restrictions on certain characters, and I want to display a tooltip or message next to the input field when illegal characters are present. The functionality is working fine, but I'm struggling to implement a satisfactory solution for the tooltip/message to appear.

I have a boolean variable that keeps track of the presence of illegal characters, but so far I haven't found a suitable method to show the tooltip/message effectively.

I experimented with uib-tooltip, but it requires hovering over the input area. I also tried using hidden/displayed span/div/label based on the boolean value, but my CSS expertise isn't sufficient for this task.

The application utilizes AngularJS and Bootstrap 3, and it's important to note that the input field is not part of a form.

javascripthtmlcssangularjs

Answer №1

Simply indicate to show the div next to the input like this:

myDiv.visible = true;

Answer №2

It's difficult to provide a direct answer without having access to your specific Javascript code.

One approach you could consider is:

function validate() {
  if (invalid = true) {
    document.getElementById("alert").style.display = 'block';
  }
}

Ensure that the error message is initially hidden,

then run the validation function when the input field is clicked...

<input type="text" onclick="validate()">

Visit this link for a live example on JsFiddle

Answer №3

User Lex provided the solution to resolve the issue.

To address the visibility of the uib-tooltip, you can control it manually by utilizing the tooltip-is-open attribute. Keep track of the invalid characters using a boolean and apply the same logic for managing the tooltip visibility.

Answer №4

As you pointed out

The application utilizes Angularjs and Bootstrap 3.

I recommend incorporating the Boostrap tooltip feature. Implement $('#element').tooltip('show') and $('#element').tooltip('hide') along with your flag to manage the state of the Tooltip.

I am unsure about how your code functions, but my suggestion is:

HTML:

<input type=text (keypress)="eventHandler()"> // angular >= 2

<input type=text ng-keypress="eventHandler()"> // angular 1

Angular code:

eventHandler() {
  if (isIllegal) {
    $('#element').tooltip('show');
  } else {
    $('#element').tooltip('hide');
  }
}

Something along those lines.

Bootstrap Tooltip: https://getbootstrap.com/docs/3.3/javascript/#tooltips

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

Arranging divs - positioning them sequentially

Visualize a math problem presented on a website. I want to showcase the math problem and allow users to input their answer beside it. I am working on setting up the structure for this feature. I have unique buttons that will modify the text of the answer. ...

csshtml

JavaScript code that opens a URL in a new tab with proper formatting

I'm having trouble figuring out how to make my JavaScript open a URL in a new tab. Here is the script: function viewSource(){ var webcache = "http://webcache.googleusercontent.com/search?q=cache:"; var request = "&prmd=ivn&strip=0& ...

javascript

Tips for converting an online HTML document into a string within an Angular framework

I'm currently facing an issue while trying to extract data from an online HTML document using Angular. The problem lies in encountering a cors error consistently. Here is the snippet of my code for reading the HTML document: loadParsingData(htmlToP ...

javascripthtmlangularparsingcors

Utilizing JavaScript to Parse Datasnap Output

I am currently working on a project in Delphi where I need to display a list of data in a listbox. However, I am struggling to understand how everything comes together. Luckily, I found a helpful answer that provided me with a solution using a dataset def ...

javascriptjqueryjsondelphidatasnap

Sending a JSON array to a WebMethod

I encountered an issue when attempting to convert an object to a JSON array as a string, resulting in an Internal Server Error. Fortunately, the GetServerTime method is functioning properly. My goal is to send an array of objects to the server and conver ...

javascriptjqueryjsonc#-4.0webmethod

Can someone help me figure out how to increase the values of two specific attributes within a class?

Currently facing a challenge with adjusting the number of likes and comments using increment for properties 'numberOfLikes' and 'comments'. Unsure whether to utilize a for loop or just the increment operator. Still new to coding, so apo ...

javascript

What is the best way to pull HTML content and insert it into a div container?

Can someone help me with transferring simple HTML content into another DIV? Whenever I try, all I get is [object HTMLDivElement]. What mistake am I making here? this.inner = document.querySelector('div[data-v="1"]') this.tail = document.querySel ...

javascript

`Arranging Pictures Side by Side`

To those who have stumbled upon my previous post on this topic, I'm revisiting the issue with a new perspective because it presents a slightly different challenge, but falls into the same category. It appears that aligning text below images is causin ...

htmlcssimage

Having trouble retrieving the iframe document using JavaScript

I'm currently facing an issue when trying to fetch an image from a website (not specifically Bing, this problem arises with every site). Upon running the code, it seems to be failing at the 'if' statement, indicating that there might not b ...

javascriptiframe

Issues with implementing jQuery scroll event on Internet Explorer 9

This is the JavaScript code I'm currently using: $(document).ready(function () { var scrollMenu = $("#list .side-nav"), scrollMenuFixed = false; $(window).scroll(function() { var scrolled = window.pageYOffset || docum ...

javascriptjqueryinternet-explorer-9compatibility

Achieving perfect vertical alignment for both single and multi-worded links

Is there a way to vertically center single and multi-worded links in a horizontal navigation bar? Currently, the multi-worded links appear centered while the single worded links float to the left. I attempted to adjust the width of ul li a and ul li.colour ...

htmlcsstexthyperlinkcentering

Error in binding dynamic component was encountered

Our Angular 2 application includes the use of the Kendo Combobox component. This particular component is wrapped within a dynamically created component during runtime. The process for creating this component is quite simple: let factory = this.resolver ...

javascriptangularkendo-ui-angular2

Having trouble positioning items to the right in bootstrap

<div id="unique-content-wrapper"> <nav class="navbar navbar-expand-lg navbar-light bg-light" id=""> <button class="navbar-toggler" id="menu-toggle"><span class="mater ...

htmlcsstwitter-bootstrapbootstrap-4

Difficulty resizing background image on iPhone

I am having an issue with the background image resizing correctly on my website, specifically on iPhone (I have not yet checked iPad). You can view the site here. The dimensions of the image are 1393 x 1098 pixels. Below is the CSS code I am currently us ...

iphoneioscss

Understanding CSS classes in ReactJS Material UI componentsJust wanted to clarify some things

When it comes to styling Material UI components, the recommended approach is to utilize their useStyles function. Here's an example: const useStyles = makeStyles(theme => ({ root: { marginTop: '15px', display: 'f ...

cssreactjsmaterial-ui

Selection menu drops down once the save is complete

I have two drop-down menus named source and campaign, displaying data from the database. In addition to these drop-downs, there are other input fields as well. My concern is that I want to save the filled data along with the selected options in the drop-do ...

phphtmlmysql

Display the image in a pop-up window before executing a jQuery script

Lately, I've been focusing on implementing zoom in and zoom out functionality for images. The plugin I've chosen to use is guillotine. It works flawlessly except for one small hiccup. My goal is to integrate it into a website built with angularJ ...

javascriptjqueryangularjsplugins

RxJs Subject is failing to activate subscriptions in the production environment, however, it functions properly in development and testing

After successfully deploying our Angular app to our test server, my team encountered an issue when trying to deploy it to the production server. While the app functions correctly in development and on the test server, the subjects are not triggering their ...

javascriptangulartypescriptrxjs

Utilizing Vue.js and Webpack to Handle Requests for Multiple Incorrect Resource Links

After utilizing Vue.js single file components to construct a website and appreciating the modular approach, I've encountered an issue. The browser appears to be requesting multiple versions of resources instead of just one URL for each. HeaderBar.vue ...

javascriptcssvue.jsnpmwebpack

Steps to extract viewmodel information from a specific controller following an ajax request

I am encountering an issue with passing updated data from my controller to the view after making an Ajax call. Here is a simplified version of what I am trying to achieve: Javascript $ANALYZE = $('#submitID'); $ANALYZE.click(function () { ...

javascriptc#ajaxasp.net-mvc