In Bootstrap I would to create a form with a pattern mandatory validation for the addresses, where the value must be:
"Free input text" + "5 numeric characters" (mandatory)
Example:
Rome - 65498
How to do that?
Demo:
https://jsfiddle.net/Lxv4f7qe/2/
Code:
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<form class="p-5" action="POST">
<label for="zip_code">Optional Spaces:</label>
<input type="tel" id="zip_code" name="zip_code" pattern="([A-Za-z]{4,60} ?- ?\d{5})?" title="Zip code"><br><br>
<label for="zip_code">Required Spaces:</label>
<input type="tel" id="zip_code" name="zip_code" pattern="([A-Za-z]{4,60} - \d{5})?" title="Zip code"><br><br>
<input type="submit">
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Here is a helpful link on the pattern matching html input attribute: https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145
Related
any ideas how to have say a set url for iframe like mysite.com/ and then this input form would add the input field to the end like mysite.com/txtsrc?
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
so rather than user inputting the full src i want mysite.com/then the form input after that but so user would not have to put mysite.com/
thanks in advance
i have tried but failed anyone able to help?
My test is very basic like this web page below. I don't understand why on iphone 6 or 5 Foundation seems not working. Do you have any idea ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.0-rc.2/dist/css/foundation.min.css" integrity="sha256-iJQ8dZac/jUYHxiEnZJsyVpKcdq2sQvdA7t02QFmp30= sha384-SplqNBo/0ZlvSdwrP/riIPDozO5ck8+yIm++KVqyMAC53S6m3BaV+2OLpi7ULOOh sha512-ho6hK4sAWdCeqopNZWNy1d9Ok2hzfTLQLcGSr8ZlRzDzh6tNHkVoqSl6wgLsqls3yazwiG9H9dBCtSfPuiLRCQ==" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.0-rc.2/dist/js/foundation.min.js" integrity="sha256-G6jsRyH1fxbsvFIXSCuwYmI1aIDYBa28xscrvmYjJy0= sha384-vtoG68NvPc9azmFJr447vvY8qgdyA4FdaJ5/bqvzIM4eAdZfO0iyRRF8l2AAscYI sha512-43seCcNrHA0BQgrtyajB9sp8yOdv5c8QdYvgjP7zJ7v+dmzAcxYDQ2gupb9aztsNWBq1COIp/3NHYkQs4l/dkg==" crossorigin="anonymous"></script>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell">
<div id="info"></div>
<div id="info2"></div>
<div id="info3"></div>
<div id="info4"></div>
<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>
<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>
</div>
</div>
</div>
<script>
$(document).foundation();
$(document).ready(function(){
$("#info").html($( window ).width());
$("#info2").html(JSON.stringify(Foundation.MediaQuery.queries));
$("#info3").html(Foundation.MediaQuery.current);
$("#info4").html(window.devicePixelRatio);
});
</script>
</body>
</html>
The result is medium any way flex grid or x-y grid.
I use sass for my project but for this test i use directly the full official cdn file. I still get same result.
This is my plunker url and code snippet:
http://plnkr.co/edit/lUB8pYKRn5JudhToxykj
<head>
<title>Event Registration</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js#*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script data-require="twitter-bootstrap#3.2.0" data-semver="3.2.0" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link data-require="bootstrap#3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="twitter-bootstrap#3.2.0" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
<script src="EventController.js"></script>
</head>
<div class="span0 well votingWidget">
<div class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton">
<i class="icon-chevron-down"></i>
</div>
</div>
The icon-chevron-up, icon-chevron-down button wouldn't show up and bootstrap seems not working either.
So how to set it up right?
Thanks much!
Zhen
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<title>Event Registration</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js#*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
<script src="EventController.js"></script>
</head>
<div class="span0 well votingWidget">
<div class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton">
<i class="icon-chevron-down"></i>
</div>
</div>
I need a program that includes two buttons to increase and decrease the number and display it
As well as storage and display number after close and open app
for storage data you can use angular-local-storage for get https://github.com/grevory/angular-local-storage
for load data use $scope.storageValue = localStorageService.get('StoreData');
for save data use localStorageService.set('StoreData',$scope.storageValue);
full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- save and load in Local -->
<script src="js/angular-local-storage.min.js"></script>
<script>
angular.module('app', ['ionic','LocalStorageModule'])
.controller('AppCtrl', function($scope, localStorageService) {
// save and load
$scope.storageValue = localStorageService.get('StoreData');
// add salavat
$scope.add=function(){
$scope.storageValue++;
localStorageService.set('StoreData',$scope.storageValue);
}
// sub salavat
$scope.sub=function(){
$scope.storageValue--;
localStorageService.set('StoreData',$scope.storageValue);
}
})
</script>
</head>
<body ng-app="app">
<ion-content>
<div style="height:100%; text-align:center" ng-controller="AppCtrl">
<div class="item item-icon-left" href="#">
<span>Number : {{storageValue}}</span> <br>
<button class="button button-positive" ng-click="add()">
+
</button>
<button class="button button-positive" ng-click="sub()">
-
</button>
</div>
</div>
</ion-content>
</body>
</html>
pic
I just downloaded PhoneGap to try it. I made an XCode Project and it's working alright. Then, I wanted to try some jQuery Mobile on it, so added this to the default Hello World Page of Cordoba:
I added, to the head:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
And then on the body:
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
I thought it would go fine, but look how it comes out:
Here's all the code in case you want to take a look at it. Am I doing something wrong?
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div>
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body> </html>
I was missing the
<div data-role="content">
wrapping the list. That was all.
Here's all the code in case it's useful for someone:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Apache Cordova</h1>
</div>
<div>
<h1>Some text</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>