Develop Reference

Ionic/Cordova Web App - index.html errors on launch

When launching my Ionic app on iOS device and in Ionic Lab, there are various popups that appear on launching. I have not been able to find out what they mean and how to resolve so I'm hoping someone here might be able to help.
The app will load if I accept the first popup, then cancel the rest.
The popups are:
Popup 1:
gap_init:2
Popup 2:
gap:[null,"CoreAndroid","messageChannel","CoreAndroid867226728"]
Popup 3:
gap:[null,"CoreAndroid","show","CoreAndroid1105789195"]
Popup 4:
gap:[null,"CoreAndroid","overrideBackbutton","CoreAndroid633498247"]
Because of the error saying "CoreAndroid" I'm assuming it's something to do with an android configuration.
I'm using the framework based off the package found on CodeCanyon. Link below: Codecanyon Ionic App
I can post any code you wish me to so please let me know.
Here is the home.html file:
<ion-view view-title="{{appname}}">
<ion-nav-buttons side="right">
<div class="cart-total ink">
<button class="button ink icon-cart button-icon button-clear ion-ios-search-strong" ui-sref="quicksearch"></button>
</div>
<div class="cart-total ink" ui-sref="app.cart">
<div ng-if="totalCartItem>0">
<span>{{totalCartItem}}</span>
</div>
<button class="button ink button-icon button-clear fa fa-shopping-basket"></button>
</div>
</ion-nav-buttons>
<ion-content class="home bg" overflow-scroll="true" scroll-to-top="150" delegate-handle="scroller">
<ion-refresher
on-refresh="doRefresh()">
</ion-refresher>
<div class="slider" ng-if="homeSlider">
<ion-slide-box auto-play="1000" does-continue="true">
<ion-slide ng-repeat="x in slides track by $index">
<a href="#/app/{{x.params}}">
<div class="img" style="background-image: url({{x.img}})"></div>
<ion-spinner class="onload"></ion-spinner>
</a>
</ion-slide>
</ion-slide-box>
</div>
<div class="row">
<ion-scroll direction="x">
<div class="wide">
<div ng-repeat="x in categories" ui-sref="app.category({id: x.id, slug: x.slug, title: x.name})">
<div class="slide-item">
<div ng-if="!x.image" class="img" style="background-image: url(img/product.png)"></div>
<div ng-if="x.image" class="img" style="background-image: url({{x.image}})"></div>
<ion-spinner class="onload"></ion-spinner>
</div>
<span class="out"></span>
<h3 class="center" ng-bind-html="x.name"></h3>
</div>
</div>
</ion-scroll>
</div>
<div ng-if="products" class="item item-divider">
LATEST PRODUCTS
</div>
<div class="row grid" ng-repeat="x in products track by $index" ng-if="$index%2==0">
<div class="col col-50 ink item" ng-if="$index < products.length" ui-sref="app.product({id: products[$index].id})">
<div class="badge">
<span ng-if="!products[$index].in_stock" class="sold">{{$root.Dict.TXT_SOLD}}</span>
<span ng-show="products[$index].regular_price > 0 && products[$index].on_sale" class="sale">
{{products[$index] | discount | number:0}}% OFF
</span>
</div>
<ion-spinner class="onload"></ion-spinner>
<div class="img" style="background-image: url({{products[$index].featured_src ? products[$index].featured_src : 'img/product.png'}})"></div>
<div class="info">
<h3>{{products[$index].title}}</h3>
<span ng-bind-html="products[$index].price | currency:format:decimal"></span>
<del ng-show="products[$index].regular_price > 0 && products[$index].on_sale" ng-bind-html="products[$index].regular_price | currency:format:decimal"></del>
</div>
</div>
<div class="col col-50 ink item" ng-if="$index+1 < products.length" ui-sref="app.product({id: products[$index+1].id})">
<div class="badge">
<span ng-if="!products[$index+1].in_stock" class="sold">{{$root.Dict.TXT_SOLD}}</span>
<span ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" class="sale">
{{products[$index+1] | discount | number:0}}% OFF
</span>
</div>
<ion-spinner class="onload"></ion-spinner>
<div class="img" style="background-image: url({{products[$index+1].featured_src ? products[$index+1].featured_src : 'img/product.png'}})"></div>
<div class="info">
<h3 ng-bind-html="products[$index+1].title"></h3>
<span ng-bind-html="products[$index+1].price | currency:format:decimal"></span>
<del ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" ng-bind-html="products[$index+1].regular_price | currency:format:decimal"></del>
</div>
</div>
</div>
<ion-infinite-scroll on-infinite="loadMore()" distance="10%" ng-if="more"></ion-infinite-scroll>
</ion-content>
<scroll-to-top-button animate="true">
<div class="float-button">
<span class="height-fix">
<a class="content">
<i class="ion-ios-arrow-up"> </i>
</a>
</span>
</div>
</scroll-to-top-button>
And here is the index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * &apos;unsafe-inline&apos;; script-src * &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">
<title>Ionstore</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionic.material.min.css" rel="stylesheet">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/line-icon/css/line-icon.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<!-- LOAD IONIC -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ionic.material.min.js"></script>
<!-- NGCORDOVA -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- PAYPAL GATEWAY -->
<script type="text/javascript" src="js/paypal-mobile-js-helper.js">
</script>
<!-- LOAD CONTROLLER -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/directive.js"></script>
<script src="js/services.js"></script>
<script src="js/config.js"></script>
<script src="js/language.js"></script>
<script src="js/topscroller.js"></script>
<script src="js/wcapi.js"></script>
<!-- LOAD ANGULAR MOMENT -->
<script src="js/moment.min.js"></script>
<script src="js/angular-moment.min.js"></script>
</body>
</html>

Modify your index.html file. cordova.js must be called at the bottom of the page. This worked for me.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * &apos;unsafe-inline&apos;; script-src * &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">
<title>Ionstore</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionic.material.min.css" rel="stylesheet">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/line-icon/css/line-icon.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<!-- LOAD IONIC -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ionic.material.min.js"></script>
<script type="text/javascript" src="js/paypal-mobile-js-helper.js">
</script>
<!-- LOAD CONTROLLER -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/directive.js"></script>
<script src="js/services.js"></script>
<script src="js/config.js"></script>
<script src="js/language.js"></script>
<script src="js/topscroller.js"></script>
<script src="js/wcapi.js"></script>
<!-- LOAD ANGULAR MOMENT -->
<script src="js/moment.min.js"></script>
<script src="js/angular-moment.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>
</html>

You are using the android cordova.js in the iOS app.
You don't have to add any cordova.js file, just link it in the index.html, it will be generated per platform and copied to the right place.

Unable to pull data from controller to a view using angularjs and ionic

I am trying to develop an app for Android using Angularjs and ionic frameworks.
The app works absolutely fine on a desktop browser but fails to fetch data from the controller when running on Intel XDK emulator or an Android device.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.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>
<script src="js/angular-resource.min.js"></script>
<script src="js/angular-route.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="engageApp">
<div ng-view></div>
</ion-pane>
</body>
</html>
app.js
'use strict';
angular.module('engageApp', ['ionic','ngRoute','ngResource','engageAppModule'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/onboardcategory',{
templateUrl: 'partials/onboard/category.html',
controller: 'OnboardCtrl'
}).
.
.
.
otherwise({
redirectTo: '/home'
});
}]);
controller.js
'use strict';
var engageAppControllers = angular.module('engageAppModule',[]);
engageAppControllers.controller('OnboardCtrl',['$scope', '$filter', '$location', function($scope , $filter, $location){
$scope.mytempvar = "Hello World!";
$scope.categories =
[
{
id: "mc1",
name: "Dance and Music"
},
{
id: "mc2",
name: "Outdoors"
},
{
id: "mc3",
name: "Fitness and Yoga"
},
{
id: "mc4",
name: "Others",
}
];
$scope.go = function ( path ) {
$location.path( path );
};
...
category.html (view)
<ion-pane>
<ion-content>
<div class="shrunk-header">
<div class="logo-container">
<img src="img/engagelogo.png" alt="logo">
</div>
<div class="header-info">
<h3>Select Category</h3>
...
</div>
<div ng-controller="OnboardCtrl" class="content-container">
<p>{{mytempvar}}</p>
<ul class="list">
<li class="item item-checkbox" data-ng-repeat="category in categories">
{{category.name}}
</li>
</ul>
</div>
...
</div>
</div>
</ion-content>
</ion-pane>
The emulator shows the following as result:
Intel XDK screenshot
Any idea as to what I'm doing wrong??
Thanks

Hi Try with this solutions It worked for me
Step1: In your Index.html page add this 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">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.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="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="lib/ngSticky/dist/sticky.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Step 2: provide routings for <ion-nav-view></ion-nav-view> in app.js file as
.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('page1',{
url:"/page1",
templateUrl:"templates/page1.html",
controller: 'ExampleCtrl'
})
$urlRouterProvider.otherwise("/page1");
})
Step3: Create a folder templates and add it under www and the folder structure will be www/templates/page1.html
<ion-view view-title="Title">
<ion-content>
<div class="shrunk-header">
<div class="logo-container">
<img src="img/engagelogo.png" alt="logo">
</div>
<div class="header-info">
<h3>Select Category</h3>
</div>
<div ng-controller="ExampleCtrl" class="content-container">
<p>{{mytempvar}}</p>
<ul class="list">
<li class="item item-checkbox" data-ng-repeat="category in categories">
{{category.name}}
</li>
</ul>
</div>
</div>
</div>
</ion-content>
</ion-view>
Step4: In above html page I created a controller as ExampleCtrl you can rename It on your own and write your controller code as
Note: I wrote my controller code in app.js file only as
.controller('ExampleCtrl', ['$scope','$ionicNavBarDelegate','$ionicPlatform','$state', function ($scope,$ionicNavBarDelegate,$ionicPlatform,$state) {
$scope.mytempvar = "Hello World!";
$scope.categories =
[
{
id: "mc1",
name: "Dance and Music"
},
{
id: "mc2",
name: "Outdoors"
},
{
id: "mc3",
name: "Fitness and Yoga"
},
{
id: "mc4",
name: "Others",
}
];
}])
Having any queries, reply back

No Screen Shows up in Mobile App, WebApp working fine

I am new to hybrid application developement, I am trying to make an application in angularJS, (Not IONIC). My App loads slow in browser but it works, however it doesnt work at all in mobile app..
I am serving it using grunt. But cant seem to figure out how to make it work in mobile..
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<title>Quiz App</title>
<!--Stylesheets-->
<!--Bootstrap-->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- injector:css -->
<link rel="stylesheet" href="styles/challenge.css">
<link rel="stylesheet" href="styles/discussion.css">
<link rel="stylesheet" href="styles/game.css">
<link rel="stylesheet" href="styles/login.css">
<link rel="stylesheet" href="styles/loginMail.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/profile.css">
<link rel="stylesheet" href="styles/ranking.css">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/subjects.css">
<link rel="stylesheet" href="styles/topics.css">
<!-- endinjector -->
<script src="cordova.js"></script>
<!--Scripts-->
<!-- JQuery-->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js" ></script>
<!-- AngularJS-->
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<!--<script type="text/javascript" src="bower_components/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="bower_components/angular-touch/angular-touch.js"></script>-->
<!--Supersonic-->
<!--<script type="text/javascript" src="bower_components/supersonic/supersonic.js"></script>
<script type="text/javascript" src="bower_components/supersonic/supersonic.core.js"></script>-->
<!--Bootstrap-->
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- Application -->
<!-- injector:js -->
<script src="scripts/App.js"></script>
<script src="scripts/config/Route.js"></script>
<script src="scripts/services/DiscussionService.js"></script>
<script src="scripts/services/ProfileService.js"></script>
<script src="scripts/services/RankingService.js"></script>
<script src="scripts/services/SubjectService.js"></script>
<script src="scripts/controllers/0-ExamBattleController.js"></script>
<script src="scripts/controllers/Body/0-BodyController.js"></script>
<script src="scripts/controllers/Body/BodyController.js"></script>
<script src="scripts/controllers/ChallengeController.js"></script>
<script src="scripts/controllers/DiscussionController.js"></script>
<script src="scripts/controllers/GameController.js"></script>
<script src="scripts/controllers/LoginController.js"></script>
<script src="scripts/controllers/ProfileController.js"></script>
<script src="scripts/controllers/RankingController.js"></script>
<script src="scripts/controllers/SubjectController.js"></script>
<!-- endinjector -->
</head>
<body id="body">
<!--<p>App has loaded</p>-->
<div id="main" ng-view></div>
</body>
</html>
This is my app run and config
var BaseImagesUrl = 'images/';
var BaseTemplateUrl = 'templates/';
var app= angular.module('app', ['ngRoute']);
app.run(function($rootScope, $timeout, $location, $route){
$rootScope.login = {};
$rootScope.test = "Hello World";
alert("app is running");
console.log($route);
});
config goes here:
app.config(function($locationProvider,$routeProvider) {
$routeProvider
.when('/', {
templateUrl: BaseTemplateUrl + 'login.html',
controller: 'LoginController'
})
.when('/loginMail', {
templateUrl: BaseTemplateUrl + 'loginMail.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
});

Please try to start the angular app inside onDeviceReady.
onDeviceReady : function() {
angular.element(document).ready(function() {
angular.bootstrap(document, ['examBattle']);
});
}
Remove ng-app
Thanks,
Madan

You should create your project using cordova CLI.
Like here: https://cordova.apache.org/docs/en/5.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface
I had so many problems with cordova months ago, so i moved my source to a new project created using CLI and everything is working.
The most important thing that you should considere when you move to CLI, is the informations about debug that CLI compiler give to you.

"Input type=text" tab indexing issue in phonegap .apk

I am using https://build.phonegap.com to create phonegap .apk file.
After opening .apk file I have got a very peculiar bug regarding tabindexing. Tab button of soft keybord is not shifting cursor to next textbox from a textbox.
Tabbing is working fine from input[type=tel] but not from input[type=text], input[type=email] and input[type=search].
Device used is Iball slide 3G Q1035 tablet and android version is 4.2.2.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="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>
</head>
<body>
<div class="app">
<form>
<div>
<span><input id='test1' tabindex='1' name='test1' type='text'></span>
</div>
<div>
<span><input id='test2' tabindex='2' name='test2' type='text'></span>
</div>
<div>
<span><input id='test3' tabindex='3' name='test3' type='search'></span>
</div>
<div>
<span><input id='test4' tabindex='4' name='test4' type='url'></span>
</div>
<div>
<span><input id='test5' tabindex='5' name='test5' type='email'></span>
</div>
<div>
<span><input id='test6' tabindex='6' name='test6' type='tel'></span>
</div>
</form>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
INDEX.JS
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
},
receivedEvent: function(id) {
}
};

Form validation not fired after submition

Im using Jquery mobile,Phonegap, and jquery validation to validate a contact form .
so the problem occurs when i go from an index page to my contact form page using a link in my index page.then when i try to validate my form using the submit button,my form is been submitted even if the form is not valid.But when i make my contact form my index page that means i don't navigate between pages my form validation works very well.
here's the code of my contact page :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plane</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/inscription.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).on("pageinit", "#main", function() {
$("#add").validate({
rules:
{
"name":{required:true},
"comment":{required:true}
}
});
});
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header" >
index
<h1>Inscription</h1>
</div>
<div data-role="content">
<form id="add" action="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="nom">
Nom
</label>
<input name="name" id="name" placeholder="name" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="prenom">
Prénom
</label>
<input name="comment" id="comment" placeholder="comment" value="" type="text" />
</fieldset>
</div>
<input id="submit" data-theme="c" type="submit" data-inline="true" value="submit">
<input id="reset" type="reset" data-inline="true" value="reset" />
</form>
</div>
</div>
</body>
</html>
and here is my index page :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>plane</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
//*********************************************************
// Wait for Cordova to Load
//*********************************************************
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header">
<h1>plane</h1>
</div>
<div data-role="content">
some content
begin
</div>
</div>
</body>
</html>
any help will be appreciated.

Try these url for validation
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gestion des tests</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/inscription.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).on("pageshow", "#main", function() {
$("#add").validate({
rules:
{
"name":{required:true},
"comment":{required:true}
}
});
});
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header" >
index
<h1>Inscription</h1>
</div>
<div data-role="content">
<form id="add" action="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="nom">
Nom
</label>
<input name="name" id="name" placeholder="name" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="prenom">
Prénom
</label>
<input name="comment" id="comment" placeholder="comment" value="" type="text" />
</fieldset>
</div>
<input id="submit" data-theme="c" type="submit" data-inline="true" value="submit">
<input id="reset" type="reset" data-inline="true" value="reset" />
</form>
</div>
</div>
</body>
</html>​