I have created page that would allow the user to enter information then submit that to js for validation and modification of a database. The page should have a pop up that notifies the user is successful or not. The pop up is color coded for errors or informational messages.
However, it needs a way to remove the pop once the user acknowledges the message. There is a button on the pop up (div) that appears and had the event listener on the button but the button is not clickable.
The html code:
<div id="panel">
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/css/msd.css"></link>
<script src="/static/lib/d3-3.3.8.min.js"></script>
</head><div id="info-msg">
<p></p>
<button id="ok">Ok</button>
</div>
<div id="reportAnomaly" >
<table id="anomaly-table" cols="2">
<tr>
<td>
<input id="submit" type="submit" value="Submit">
</td>
<td>
<input id="reset" type="reset" value="Reset Form">
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="static/js/dbanomaly.js"></script>
</body>
</html>
The JavaScript code:
var infoMsgDiv = d3.select("#info-msg");
d3.select("#submit").on('click', reportAnomaly);
d3.select("#reset").on('click', resetForm);
d3.select("#ok").on('click', resetForm);
function reportAnomaly() {
insertResults();
}
function insertResults () {
displayMessage('warn', "Successfully added.");
}
function resetForm () {
_log("resetForm");
infoMsgDiv.style("opacity", 0);
}
function displayMessage (level, message) {
_log("displayMessage");
if (level === 'crit') {
infoMsgDiv.style("background-color", "red");
} else if (level === 'warn') {
infoMsgDiv.style("background-color", "yellow");
}
infoMsgDiv.style("opacity", 1);
infoMsgDiv.select("p").html(message);
}
the CSS is:
#info-msg {
position: absolute;
top: 0;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
border: 1px solid #ddd;
border-radius: 10px;
font: 10pt sans-serif;
text-align: center;
line-height: 1.2em;
opacity: 0;
transition: opacity 500ms ease-in 250ms;
pointer-events: none;
color: black;
}
#info-msg{
top: 50%;
left: 50%;
padding: 10px;
background-color: #FFFF9F;
}
Any ideas why the "#ok" button would not be clickable?
Related
I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
/*Html & body theme*/
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html{
font-family:"lato",Arial,sans-serif;
}
body {
width: 100%;
height: 100vh;
color:black;
background: linear-gradient(-45deg, rgba(8,19,114,1) 6%, rgba(0,212,255,1) 42%, rgba(231,246,246,1) 82%);
}
/*container properties*/
.grid-container {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
}
.grid-container:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#box {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
border-radius:5px;
}
#box{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
border-radius: 5px;
}
.grid-item-1{
height: 150px;
width:1880px;
position:fixed;
left:10px;
top:20px;
font-size:100px;
text-align:center;
}
.grid-item-2{
height: 600px;
width:500px;
position:fixed;
left:10px;
top:350px;
}
.grid-item-3{
height: 300px;
width:1370px;
position:fixed;
left:520px;
top:180px;
}
.grid-item-4{
height:450px;
width:1370px;
position:fixed;
left:520px;
top:500px;
}
.grid-item-5{
height: 150px;
width:500px;
position:fixed;
left:10px;
top:180px;
font-size: 30px;
}
/*Search Bar Properties*/
form.searchInput input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.searchInput button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.searchInput button:hover {
background: #0b7dda;
}
form.searchInput::after {
content: "";
clear: both;
display: table;
}
form.searchInput {
top:30px;
bottom:40px;
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="Stylesheet" href="WeatherDashboardStylesheet.css" type=text/CSS>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<title>WeatherDashboard</title>
</head>
<body>
<div class ="grid-container">
<div id="box" class="grid-item-1">
WeatherDashboard ⛅
</div>
<div id="box" class="grid-item-2">
Item 2
</div>
<div id="box" class="grid-item-3">
Item 3
</div>
<div id="box" class="grid-item-4">
<div id="display" class="display-box">
<p class="city"></p>
<img class="icon">
<p class="date"></p>
<p class="weather"></p>
<p class="temp"></p>
<p class="humidity"></p>
<p class="wind"></p>
</div>
</div>
<div id="box" class="grid-item-5">
Search for a City:
<form class="searchInput" style="margin:auto;max-width:300px">
<input id=input class="input1" type="text" placeholder="Search..." name="search" value="">
<button onclick="myfunction()" id="button" class="button1" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<script rel="Script" src="WeatherDashboardScript.js" type=text/javascript></script>
<script src="https://api.openweathermap.org/data/2.5/forecast?q=chicago&appid=dc171ae0b3b507207c6605cbab0a5f98"></script>
</body>
</html>
Hello, I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
You've got a few problems with your html and your js.
First with your js. In your file, all the code is in 'the main' and is being executed as soon as the file loads. You dont want that, you want to create a function so you can use it to link it with the 'onclick' event. You that simply by wrapping your code in a function like this:
function myfunction() {
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
}
After that, I see you've got a variable called City inside your request which has no value. Your code has to know what is that and be able to retrieve its value. For that we call the 'document' object which contains the input and take its value. Like this:
var City = document.getElementById('input').value;
console.log(City) // Print it for good meassure
With that inside your function, every time you click the button, the value is going to be updated and do the request.
Now, in your html you need to change your button's type property. If its of type submit, the form is submited and the page reloaded (The whole form is unnecesary really but I'll leave it in as to not change your code too much). In this case you want your button to be of type 'button' so it only acts as a button when pressed. Like this:
...
<form class="searchInput" style="margin:auto;max-width:300px" >
<input id="input" class="input1" type="text" placeholder="Search..." name="search">
<button onclick="myfunction()" id="button" class="button1" type="button"><i class="fa fa-search"></i></button>
</form>
...
With all that your code should work, retrieve your json and display the information you want on screen.
I hope all of this helps!
I have an iFrame in HTML code, and I created a script tag that I set on a submit button. I want the iFrame to be visible when I click on the submit button, but that is not working. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
#outerdiv
{
border:none;
width:100%;
height:500px;
overflow:hidden;
}
#innerIframe
{
border: none;
position:relative;
top:-190px;
width:100%;
height:900px;
}
</style>
</head>
<body>
<h2>Web Service</h2>
<script type="text/javascript">
function showIFrame() {
var iframe = document.getElementById("innerIframe");
iframe.style.visibility="visible";
}
</script>
<form class="example" method="post" style="margin:auto;max-width:500px">
<input type="text" placeholder="Search query" name="search2">
<button type="submit" name="submit" onclick="showIFrame()"><i class="fa fa-search"></i></button>
</form>
<br>
<div id="outerdiv" >
<iframe src={{results}} id="innerIframe" style="visibility: hidden;" scrolling="yes"></iframe>
</div>
</body>
</html>
{{results}} is the URL that is passed by the user in python Flask. So in the form the user types in a word, which then joins it to a URL and performs a search. The search works perfectly, but when the page is loaded on startup, it shows Not Found, the requested URL has not been found... and I understand why that happens as the URL hasn't been loaded yet. So I want to make the iFrame invisible, and once the submit button is pressed, the frame can be visible.
I have tried with jQuery as well, but it did not work.
All help and advice will be highly appreciated.
First pass "event" when you call the onClick function in your HTML code like this *onclick="showIFrame(event)
Then in your function, you accept the "event" as a parameter like this *function showIFrame(event) {
A click button most times trigers your page to refresh, so you have to stop that by preventing the default action. Add "event.preventDefault()" to your function like this *event.preventDefault()
I tried to add the next button on the popup box. Now it is run popups in a specific order. Also, when the final popup open, the button disable automatically. but there is an issue. when I delete some modal, the code is not working. I want to run popups in that order and when I delete some popup, the popups want to run correctly. Also, I want to create the previous button. how can I do it? please help me to fix the issue.
Here is the code I used.
$(document).ready(function() {
var currentmodal = 1;
$(".getAssignment").click(function() {
var $divs = $(".modalDialog");
var modal = $("*[data-modalorder="+(currentmodal++)+"]");
if(!$("*[data-modalorder="+currentmodal+"]").length)
{
modal.find("input.getAssignment").prop("disabled",true);
}
if ($divs.length > 0 && modal) {
window.location.href = "#" + $(modal).attr("id");
}
});
});
$(document).ready(function() {
var currentmodal = 1;
$(".getAssignment2").click(function() {
var $divs = $(".modalDialog");
var modal = $("*[data-modalorder="+(currentmodal--)+"]");
if(!$("*[data-modalorder="+currentmodal+"]").length)
{
modal.find("input.getAssignment2").prop("disabled",true);
}
if ($divs.length > 0 && modal) {
window.location.href = "#" + $(modal).attr("id");
}
});
});
<input class="getAssignment" type="button" value="Open Modal">
<div id="openModal" class="modalDialog" data-modalorder=1>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder=2>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 2</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
https://jsfiddle.net/Sanjeewani/q1tm8ck2/38/
I'm not exactly sure if this is what you want. But i tried rewriting your js a bit.
$(document).ready(function() {
var data=[];
currentModal = 0;
$('.modalDialog').each(function(){
data.push({
id: $(this).attr('id'),
order: $(this).data('modalorder')
});
})
$('#openModalBtn').click(function(){
currentModal = 0;
window.location.href = "#" + data[currentModal].id;
$('#'+data[currentModal].id).find('.getAssignment2').prop('disabled', true);
})
//prev
$('.getAssignment2').click(function(){
if (currentModal>0) {
currentModal--;
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
//next
$('.getAssignment').click(function(){
if (currentModal<data.length - 1) {
currentModal++;
if (currentModal===data.length - 1) $('#'+data[currentModal].id).find('.getAssignment').prop('disabled', true);
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
})
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment{
cursor:pointer;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<input type="button" id="openModalBtn" value="Open Modal">
<div id="openModal1" class="modalDialog" data-modalorder=1>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder=2>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 2</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder=3>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 3</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
</body>
I have a #main-container with groups of input type checkboxes. These checkboxes open up button lists when checked.
The #main-container that holds all of this can be closed by a button. The problem I have is how do I make this button that closes #main-container also uncheck any checkboxes that are left checked when the #main-container is closed?
At the bottom I have included the only way I know to do it with Javascript at the moment, but that means making a variable for each checkbox and that checkbox must have a unique ID. I am trying to avoid that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input checkbox</title>
<style>
body {
margin: 0;
background: beige;
border: 1px solid blue;
}
.main-container {
border: 1px solid red;
width: 25%;
position: relative;
}
.toggle-box {
display: none;
}
label {
margin: 0.2em;
display: block;
text-align: center;
transition: all 1s linear;
border: 1px solid green;
}
.toggle-box + div {
display: none;
margin: 0.2em;
text-align: center;
}
.toggle-box:checked + div {
display: block;
border: 1px solid black;
transition: all 1s linear;
}
button {
display: block;
margin: auto;
width: 100%;
}
</style>
</head>
<body>
<div id="main-container" class="main-container">
<label for="toggle-box">A</label>
<input class="toggle-box" id="toggle-box" type="checkbox" >
<div>
<button type="button">submit</button>
<button type="button">submit</button>
</div>
<label for="toggle-box2">B</label>
<input class="toggle-box" id="toggle-box2" type="checkbox" >
<div>
<button type="button">submit</button>
<button type="button">submit</button>
</div>
<div></div>
<div></div>
<div class="test1"></div>
</div>
<button type="button" onclick="closeMe()">close</button>
<button type="button" onclick="openMe()">open</button>
<script>
function closeMe() {
var $toggleBox = document.getElementById("toggle-box");
$toggleBox.checked = false;
document.getElementById("main-container").style.display = "none";
}
function openMe() {
document.getElementById("main-container").style.display = "block";
}
</script>
</body>
</html>
function closeMe() {
var $toggleBoxes = document.querySelectorAll(".toggle-box");
$toggleBoxes.forEach(function(box){
box.checked = false;
});
document.getElementById("main-container").style.display = "none";
}
document.querySelectorAll return an array of all the matched element (match with a css selector). Then, we loop through all those elements using forEach (you can use a for loop instead if you want).
You can use document.querySelectorAll to select all checkboxes for example:
var cbks = document.querySelectorAll('.toggle-box');
cbks.forEach(function(val){
val.checked = true;
});
You can select all the checkboxes by getElementsByClassName and then iterate over all the check box and set the checked value to false.
var $toggleBoxes = document.getElementsByClassName("toggle-box");
[].forEach.call($toggleBoxes, function(elem) {
elem.checked = false;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input checkbox</title>
<style>
body {
margin: 0;
background: beige;
border: 1px solid blue;
}
.main-container {
border: 1px solid red;
width: 25%;
position: relative;
}
.toggle-box {
display: none;
}
label {
margin: 0.2em;
display: block;
text-align: center;
transition: all 1s linear;
border: 1px solid green;
}
.toggle-box + div {
display: none;
margin: 0.2em;
text-align: center;
}
.toggle-box:checked + div {
display: block;
border: 1px solid black;
transition: all 1s linear;
}
button {
display: block;
margin: auto;
width: 100%;
}
</style>
</head>
<body>
<div id="main-container" class="main-container">
<label for="toggle-box">A</label>
<input class="toggle-box" id="toggle-box" type="checkbox">
<div>
<button type="button">submit</button>
<button type="button">submit</button>
</div>
<label for="toggle-box2">B</label>
<input class="toggle-box" id="toggle-box2" type="checkbox">
<div>
<button type="button">submit</button>
<button type="button">submit</button>
</div>
<div></div>
<div></div>
<div class="test1"></div>
</div>
<button type="button" onclick="closeMe()">close</button>
<button type="button" onclick="openMe()">open</button>
<script>
function closeMe() {
var $toggleBoxes = document.getElementsByClassName("toggle-box");
[].forEach.call($toggleBoxes, function(elem) {
elem.checked = false;
});
document.getElementById("main-container").style.display = "none";
}
function openMe() {
document.getElementById("main-container").style.display = "block";
}
</script>
</body>
</html>
i created sample program for business validation, here error message showing , but its not showing particular error field , how to solve this issue,
Thanks in advance .................................................................
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.save=function()
{
if($scope.firstName == undefined)
{
$('#popup1').fadeIn($(this).data());
// in the RC of 1.3 there is function.link only the function customs Validation.compile which
// needs to be invoked to get at the functions.
setTimeout(function(){
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
}
if($scope.lastName = undefined){
$('#popup1').fadeIn($(this).data());
// in the RC of 1.3 there is function.link only the function customs Validation.compile which
// needs to be invoked to get at the functions.
setTimeout(function(){
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('lastName');
if (element)
element.focus();
}
}
});
.modal-box {
display: none;
position: absolute;
z-index: 1000;
width: 98%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 20px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
#media (min-width: 32em) {
.modal-box { width: 180px; top: 215px; left: 390px; }
}
.modal-box header,
.modal-box .modal-header {
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box .modal-body { padding:22px; background-color: #dd4b39;
border-radius: 20px; height: 0px;
color: white;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<input type="submit" ng-click="save()">
</div>
<div id="popup1" class="modal-box">
<div class="modal-body">
<span style="position:absolute;top:10px;">Please Enter the Value </span>
</div>
</div>
</body>
why you are opting this way to carry out validations on form fields when angular have self validation functions/operations. And your method isn't good enough to be considered as best practice when you're with angularJs
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try leaving the first input field blank:</p>
<form name="myForm">
<p>Name:
<input name="firstName" ng-model="firstName" required>
<span ng-show="myForm.firstName.$touched && myForm.firstName.$invalid">The First name is required.</span>
</p>
<p>Adress:
<input type="text" name="lastName" ng-model="lastName" required>
<span ng-show="myForm.lastName.$touched && myForm.lastName.$invalid">The Addressis required.</span>
</p>
</form>
</body>
</html>
And after this you could customize styling for span used for error as well as JQUERY for animation effects. In your external css & Js scripts.
And it is considered to be the best practices for angularjs too. As well reduces headache of writing jquery code manually for validation. Thanks & Cheers :)
I edit your code please compare and verify
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<style type="text/css">
.modal-box
{
display: none;
position: absolute;
z-index: 1000;
width: 98%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 20px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
#media (min-width: 32em)
{
.modal-box { width: 180px; top: 215px; left: 390px; }
}
.modal-box header,
.modal-box .modal-header
{
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box .modal-body
{
padding:22px; background-color: #dd4b39;
border-radius: 20px; height: 0px;
color: white;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<input type="submit" ng-click="save()">
<div id="popup1" class="modal-box">
<div class="modal-body">
<span style="position:absolute;top:10px;">{{error}}</span>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope,$http,$sce)
{
$scope.save=function()
{
if($scope.firstName == undefined)
{
$('#popup1').fadeIn($(this).data());
setTimeout(function()
{
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
$scope.error = "Please enter first name.";
return;
}
if($scope.lastName == undefined)
{
$('#popup1').fadeIn($(this).data());
setTimeout(function()
{
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
$scope.error = "Please enter last name.";
return;
}
}
});
</script>
</body>
</html>