I'm interested if it's possible to change the default validation message for a placeholder. Must be a way to made a custom message.
My form:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Placeholder</title>
</head>
<body>
<form>
<input type="text" id="email" maxlength="35" placeholder="E-mail" required>
<button type="submit">Ok</button>
</form>
</body>
</html>
I've tried with JavaScript but the message apears everytime:
<script type="text/javascript">
document.getElementById('email').setCustomValidity('Please enter your e-mail!');
</script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
</head>
<body>
<form>
<input type="text" id="email" maxlength="35" placeholder="E-mail" required>
<button type="submit">Ok</button>
</form>
<script>
$(document).ready(function(){
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++){
elements[i].oninvalid = function(e){
e.target.setCustomValidity("");
if (!e.target.validity.valid){
e.target.setCustomValidity("This field cannot be left blank");
}
};
elements[i].oninput = function(e){
e.target.setCustomValidity("");
};
}
})
</script>
</body>
</html>
Related
I want to get the value of an input field and put the value in between a paragraph and a <strong></strong> tag.
$(document).ready() {
$("#submit").on("click", function() {
let inputval = $("#name").val();
$(".inputvalue").val(inputval);
})
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<header>
<h1>Jquery</h1>
</header>
<main>
<section>
<label for="name">Name</label>
<input type="text" id="name">
<input type="submit" id="submit">
<p class="inputvalue">Hallo <strong>here goes the value of the input field</strong></p>
</main>
<link rel="stylesheet" href="/lib/css/styleswebd06.css">
<script src="/lib/jquery.min.js"></script>
<script src="/lib/js/appwebd06.js"></script>
</body>
</html>
i tried to get the value of the input field #name in class .inputvalue
to geht the text hallo inputvalue
Could you try this :
$(document).ready()
{
$("#submit").on("click", function () {
let inputval = $("#name").val();
$(".inputvalue").html('HELLO <strong>' + inputval + '</strong>');
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<header><h1>Jquery</h1></header>
<main>
<section>
<label for="name">Name</label>
<input type="text" id="name">
<input type="submit" id="submit">
<p class="inputvalue">Hallo <strong>here goes the value of the input field</strong></p>
</main>
<link rel="stylesheet" href="/lib/css/styleswebd06.css">
<script src="/lib/jquery.min.js"></script>
<script src="/lib/js/appwebd06.js"></script>
</body>
</html>
$(".inputvalue strong").text(inputvalue);
$(".inputvalue").html('HELLO <strong>' + inputval + '</strong>');
Thank you very much.
Here is just an example:
<html>
<p><center>Background Color: <input type="text" name="image"> <button>Go</button> </center></p>
<body style="background-color:powderblue;">
<html>
How would I make it so when you press the go button, the text in the input changes the powderblue to whatever is written there?
A script from jquery will do the trick. See below:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<p><center>Background Color: <input type="text" name="image" id="txtcolor">
<button id="btngo">Go</button> </center></p>
<body style="background-color:powderblue;">
</body>
<script>
$("#btngo").click(function(){
var color = $("#txtcolor").val();
$('body').css("background-color", ""+ color +"");
});
</script>
</html>
I want a Calendar on a HTML Input Text.
I don't want HTML5 or other solutions.
I created a possible solution on this JSFiddle.
<head>
<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>
</head>
<input type="text" name="date1" id="date1" alt="date" class="IP_calendar" title="d/m/Y">
But I'm looking for other alternatives with other styles.
Any suggestion?
Why not doing this (just checked it) :
$(document).ready(function() {
$("#start_datepicker").datepicker();
$("#end_datepicker").datepicker();
});
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">
<form action="sample.php" method="post">
Start Date: <input type="text" name="startdate" id="start_datepicker"/>
End Date: <input type="text" name="enddate" id="end_datepicker"/>
</form>
</body>
</html>
I want to display error message in label on click if the textbox is empty or undefined using AngularJS.
I am very beginner into AngularJS.
Please help to solve this issue.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="form">
<div ng-controller="formController">
<label>Name: <input type="text" ng-model="user.name" /></label><br />
<input type="submit" ng-click="update(user)" value="Save" />
<pre>{{master | json}}</pre>
</div>
<script>
angular.module('form', []).controller('formController', ['$scope', function ($scope) {
$scope.master = {};
$scope.update = function (user) {
debugger;
$scope.master = angular.copy(user);
if (user == undefined) {
debugger;
alert("Please enter text");
}
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate ng-submit="Validate()">
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span ng-show="ShowUserNameError">Username is required.</span>
</span>
</p>
</p>
<p>
<input type="submit" ng-click="Validate()">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.ShowUserNameError = false;
$scope.user = '';
$scope.email = '';
$scope.Validate = function(){
if(!$scope.user)
$scope.ShowUserNameError = true;
else
$scope.ShowUserNameError = false;
}
});
</script>
</body>
</html>
Enclose the input in a named form, name the input, and use ng-show:
<div ng-controller="formController">
<form name="form1">
<label>Name: <span ng-show="form1.item1.$error">{{form1.item1.$error}}</span>
<input name="item1" type="text" required ng-model="user.name" />
</label><br />
<input type="submit" ng-click="update(user)" value="Save" />
<pre>{{master | json}}</pre>
</form>
</div>
For more information, see
AngularJS <form> Directive API Reference - Example
AngularJS Developer Guide - Forms
I have web page in which i have input field when i enter any data in textfield screens slides up i want to stop this slides,i have searches some people say it is by default in ipad you can not fix it any idea how tackle this issue.
here is my code
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script>
function test(){
alert("Working");
window.scrollTo(0,600);
}
</script>
</head>
<body>
<h1>Form Demo</h1>
<form>
<label for="name">Text Input:</label>
<input type="text" onKeyPress="test()" name="name" id="name" value="" style="margin:400px 0 0 0;" />
</form>
</body>
</html>
Disabled scrolling with this:
<script type="text/javascript">
$(document).ready(function() {
document.ontouchmove = function(e){
e.preventDefault();
}
});
</script>