PhoneGap Tutorial: PhoneGap - creating forms and validating forms example using jquerymobile

Hi friends,

I am going to explain you how to create forms and validate them according to input.

Title: Creating forms using jquerymobile and validating them and sending request to server and getting some response from server.

Here is the project structure :

colors.css

label
.missing

{

color:#FF0000;

font-weight:bold;

}

wait.gif

Add the following image

index.html

DOCTYPE html>

html>

<head>

<title>New Claim</title>

// Global declarations - assignments made in $(document).ready() below

var hdrMainvar = null;

var contentMainVar = null;

var ftrMainVar = null;

var contentTransitionVar = null;

var stateLabelVar = null;

var whatLabelVar = null;

var stateVar = null;

var whatVar = null;

var form1var = null;

var confirmationVar = null;

var contentDialogVar = null;

var hdrConfirmationVar = null;

var contentConfirmationVar = null;

var ftrConfirmationVar = null;

var inputMapVar = null;

// Constants

var MISSING = "missing";

var EMPTY = "";

var NO_STATE = "ZZ";

</script>

head>

body>

div data-role="page" data-theme="a" id="page1">

<h1>Simple Registration</h1>

</div>

<label for="title">Title*</label>

</div>

<label for="fname" id="fnameLabel" name="fnameLabel">First name*</label>

</div>

</div>

<label for="email">Email*</label>

</div>

<label for="phone">Phone</label>

</div>

<label for="street">Street address*</label>

</div>

</div>

<label id="stateLabel" for="state">State*</label>

<option value="ZZ">Please select a state</option>

<option value="AL">Alabama</option>

<option value="AK">Alaska</option>

<option value="AZ">Arizona</option>

<option value="AR">Arkansas</option>

<option value="CA">California</option>

<option value="CO">Colorado</option>

<option value="CT">Connecticut</option>

<option value="DE">Delaware</option>

<option value="FL">Florida</option>

<option value="GA">Georgia</option>

<option value="HI">Hawaii</option>

<option value="ID">Idaho</option>

<option value="IL">Illinois</option>

<option value="IN">Indiana</option>

<option value="KS">Kansas</option>

<option value="KY">Kentucky</option>

<option value="LA">Louisiana</option>

<option value="ME">Maine</option>

<option value="MD">Maryland</option>

<option value="MA">Massachusetts</option>

<option value="MI">Michigan</option>

<option value="MN">Minnesota</option>

<option value="MS">Mississippi</option>

<option value="MO">Missouri</option>

<option value="MT">Montana</option>

<option value="NE">Nebraska</option>

<option value="NV">Nevada</option>

<option value="NH">New Hampshire</option>

<option value="NJ">New Jersey</option>

<option value="NM">New Mexico</option>

<option value="NC">North Carolina</option>

<option value="ND">North Dakota</option>

<option value="OK">Oklahoma</option>

<option value="OR">Oregon</option>

<option value="PA">Pennsylvania</option>

<option value="RI">Rhode Island</option>

<option value="SC">South Carolina</option>

<option value="SD">South Dakota</option>

<option value="TN">Tennessee</option>

<option value="TX">Texas</option>

<option value="VT">Vermont</option>

<option value="VA">Virginia</option>

<option value="WA">Washington</option>

<option value="WV">West Virginia</option>

<option value="WI">Wisconsin</option>

<option value="WY">Wyoming</option>

</select>

</div>

<label for="zip">Postal code*</label>

</div>

<label id="whatLabel" for="what">Please explain what happened*:</label>

</div>

</div>

</form>

</div>

<div>Please fill in all required fields before submitting the form.</div>

</div>

<div align="CENTER"><h4>Your claim has been sent. Please wait.</h4></div>

</div>

<h1>Claim Created</h1>

</div>

<p>A new claim has been created based on data you have submitted.</p>

<p>Your confirmation number is: <span id="confirmation" name="confirmation"></span> </p>

</div>

$(document).ready(

function() {

// Assign global variables

hdrMainVar = $(

'#hdrMain');

contentMainVar = $(

'#contentMain');

ftrMainVar = $(

'#ftrMain');

contentTransitionVar = $(

'#contentTransition');

stateLabelVar = $(

'#stateLabel');

whatLabelVar = $(

'#whatLabel');

stateVar = $(

'#state');

whatVar = $(

'#what');

form1Var = $(

'#form1');

confirmationVar = $(

'#confirmation');

contentDialogVar = $(

'#contentDialog');

hdrConfirmationVar = $(

'#hdrConfirmation');

contentConfirmationVar = $(

'#contentConfirmation');

ftrConfirmationVar = $(

'#ftrConfirmation');

inputMapVar = $(

'input[name*="_r"]');

hideContentDialog();

hideContentTransition();

hideConfirmation();

});

'#buttonOK').click(function() {

hideContentDialog();

showMain();

return false;

});

'#form1').submit(function() {

var err = false;

// Hide the Main content

hideMain();

// Reset the previously highlighted form elements

stateLabelVar.removeClass(MISSING);

whatLabelVar.removeClass(MISSING);

inputMapVar.each(

function(index){

this).prev().removeClass(MISSING);

});

// Perform form validation

inputMapVar.each(

function(index){

if($(this).val()==null || $(this).val()==EMPTY){

this).prev().addClass(MISSING);

err =

true;

}

});

if(stateVar.val()==NO_STATE){

stateLabelVar.addClass(MISSING);

err =

true;

}

if(whatVar.val()==null||whatVar.val()==EMPTY){

whatLabelVar.addClass(MISSING);

err =

true;

}

// If validation fails, show Dialog content

if(err == true){

showContentDialog();

return false;

}

// If validation passes, show Transition content

showContentTransition();

// Submit the form

$.post(

"requestProcessor.php", form1Var.serialize(), function(data){

confirmationVar.text(data);

hideContentTransition();

showConfirmation();

});

return false;

});

function hideMain(){

hdrMainVar.hide();

contentMainVar.hide();

ftrMainVar.hide();

}

function showMain(){

hdrMainVar.show();

contentMainVar.show();

ftrMainVar.show();

}

function hideContentTransition(){

contentTransitionVar.hide();

}

function showContentTransition(){

contentTransitionVar.show();

}

function hideContentDialog(){

contentDialogVar.hide();

}

function showContentDialog(){

contentDialogVar.show();

}

function hideConfirmation(){

hdrConfirmationVar.hide();

contentConfirmationVar.hide();

ftrConfirmationVar.hide();

}

function showConfirmation(){

hdrConfirmationVar.show();

contentConfirmationVar.show();

ftrConfirmationVar.show();

}

</script>

div>

body>

html>

OutPut

Html5 Tutorial - Future Technology

Tuesday 4 December 2012

PhoneGap - creating forms and validating forms example using jquerymobile

2 comments: