I want to display tooltip for the field when in place error is occured for field.
If ng-message is "required" then tooltip should display "You did not enter a field" when error is cleared then tooltip should not display anything. Again if ng-message is "maxlength" then tooltip should display "Your field is too long".
This is my plunk
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngMessages-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-messages.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="ngMessagesExample">
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-maxlength="5"
required
data-toggle="tooltip" title="You did not enter a field!"
/>
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
</body>
</html>
script.js:
(function(angular) {
'use strict';
angular.module('ngMessagesExample', ['ngMessages']);
})(window.angular);
Any idea how to add tooltip?
I edited your Plunker as follows:
In the controller I modified the showerror function:
$scope.showerror = function() {
console.log(myForm.myName);
if ($scope.myForm.myName.$error) {
if ($scope.myForm.myName.$error.required == true) {
$scope.message = "You did not enter a field";
} else if ($scope.myForm.myName.$error.maxlength == true) {
$scope.message = "Your field is too long";
}
} else {
$scope.message = "hi";
}
};
Hope this helps.
Related
How can I make the user able to save his tasks in my to do list website and when I write something in the text box I can't see it until I hit add a task can anyone explain why this problem happened in my website
<body>
<div id="c"></div>
<div id="newtasks">
<input type="text" id="textInput" placeholder="Enter task" />
<button id="addTask">Add task</button><br />
<div id="main">
</div>
<div id="tasks"></div>
</div>
<script>
const main = document.querySelector("#main");
const inputText = document.querySelector("#textInput");
const taskBtn = document.querySelector("#addTask");
function addTask(taskData) {
const task = document.createTextNode(taskData);
main.appendChild(task);
main.appendChild(document.createElement("br"));
}
taskBtn.addEventListener("click", () => {
if (inputText.value == "") {
alert("please enter task!!");
} else {
addTask(inputText.value);
inputText.value = "";
}
});
</script>
</body>
[1]: https://i.stack.imgur.com/2Wdcw.png
Your code needs the button to be pressed to add an item to the list, if it was adding things sooner, the list would be showing a letter by letter basis wouldn't it?
Can you elaborate on the desired result?
const main = document.querySelector("#main");
const inputText = document.querySelector("#textInput");
const taskBtn = document.querySelector("#addTask");
function addTask(taskData) {
const task = document.createTextNode(taskData);
main.appendChild(task);
main.appendChild(document.createElement("br"));
}
taskBtn.addEventListener("click", () => {
if (inputText.value == "") {
alert("please enter task!!");
} else {
addTask(inputText.value);
inputText.value = "";
}
});
<html>
<head>
<meta charset="utf-8">
<meta name="Go from idea to action in seconds with to-do list">[enter image description
here][1]
<title> list to do</title>
<link rel="stylesheet" href="c.css" />
</head>
<body>
<div id="c"></div>
<div id="newtasks">
<input type="text" id="textInput" placeholder="Enter task" />
<button id="addTask">Add task</button><br />
<div id="main"></div>
<div id="tasks"></div>
</div>
</body>
</html>
[1]: https://i.stack.imgur.com/2Wdcw.png
I am unsure why the input is not updating the name variable as undefined is always displayed
Here is my html code
<!DOCTYPE html>
<html>
<head>
<title>My First React Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="refscript.jsx" type="text/jsx"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
And this is my jsx file named refscript.jsx
var RefComponent = React.createClass({
display: function(){
var name = this.inputdemo.value;
document.getElementById('dispName').innerHTML = name;
},
render:function(){
return(
<div>
<h2>Name: <input type="text" ref ={input => this.inputdemo = input}/></h2><br/>
<button onClick={this.display}>Click</button>
<h1>Hi...<span id='dispName'></span></h1>
</div>
);
}
});
React.render(
<RefComponent/>, document.getElementById('content')
)
I am trying to validate user input against field on spreadsheet. Not sure if I am using withFailureHandler correctly. I have an output field defined in the form and this would show 'duplicate entry' if the entry is already present on the spreadsheet. I tried the following code for just testing to see if the form will display any output and this does not seem to be working.
code.gs
function sendItem() {
var form = HtmlService.createHtmlOutputFromFile('test');
SpreadsheetApp.getUi().showSidebar(form);
}
function getTest(sometext) {
return false;
}
test.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<input type="text" id="amount" name="amount" placeholder="serving in gms"><br>
<button class="myStyle" onclick="sendTest()">🫒</button>
</div>
<div id="output" placeholder=" any errors will appear here"></div>
</body>
</html>
<script>
function sendTest(){
var amount = document.getElementById("amount").value;
google.script.run.getTest(amount)
.withFailureHandler(onFailTest);
document.getElementById("amount").value = "";
}
function onFailTest() {
var output = document.getElementById("output");
text = "duplicate entry retry";
output.innerHTML = text;
}
</script>
I'd do the html like this:
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<input type="text" id="amount" name="amount" placeholder="serving in gms"><br>
<button class="myStyle" onclick="sendTest()">🫒</button>
</div>
<div id="output"></div>
<script>
function sendTest(){
var amount = document.getElementById("amount").value;
google.script.run
.withFailureHandler(function(){output.innerHTML = "duplicate entry retry";})
.getTest(amount);
document.getElementById("amount").value = "";
}
</script>
</body>
</html>
But I'd use withSuccessHandler to handle the getTest return onFailureHandler will handle errors not false returns, I think.
So I am trying to build the simplest Angular JS application and no idea what I am doing wrong.
It is made of 4 files:
index.html - which I use like a layout to display main.html
app1.js - used for defining simple routing rules like /main should redirect to main.html in combination with MainController; when it doesn't find a valid path, revert to a default which equals the previous path
MainController.js - I just have some timer functions here
main.html - displays a search button and search textbox
For some reason, I can't see mainvtemplate from my index.html which should redirect me to /main.
Here is the code:
index.html file
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="MainController.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view></div>
</body>
</html>
the app1.js
(function(){
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});
}());
the main.html file:
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
You may ignore the countdown, this is a timer created in MainController.js. I render its simplified logic:
(function() {
var app = angular.module("githubViewer");
var MainController = function($scope, $interval, $location) {
$scope.search = function(username) {
if(countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
$location.path("/user/" + username);
};
$scope.countdown = 5;
};
app.controller("MainController", MainController);
}());
Isn't weird I'm not able to see the search button and search textbox? Maybe I am missing sth really obvious here.
in your index.html
<script src="app.js"></script>
replace with
<script src="app1.js"></script>
main.html
<div ng-app="githubViewer" ng-controller="MainController ">// add ng app ang nd cntroller
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
In the following code, I hope to post the data to original URL, so I set blank for action attribute in <form action='' method='post' enctype='multipart/form-data' id="myformID">, the code works well.
But in IDE of VS Express for Web, the system report validation (XHTML5) warning : action attribute requires a value!
How can I fill in a value for the action attribute?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#ToolBarDownload").click(function(){
if (confirm('Do you want to Download')) {
$("#myformID").submit();
}
});
$("#myformID").submit( function(eventObj) {
$('<input />').attr('type', 'hidden')
.attr('name', "myCw")
.attr('value', "mydata")
.appendTo('#myformID');
return true;
});
});
</script>
</head>
<body>
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myformID">
</form>
<span id="ToolBarDownload" class="ToolBarButton" style="margin-left:5px">Download</span>
</div>
</body>
</html>