Skip to content

Instantly share code, notes, and snippets.

@leowebguy

leowebguy/form.html

Last active July 12, 2016 17:12
Show Gist options
  • Save leowebguy/eb2479f98590cfc2b5c1d379b64ee998 to your computer and use it in GitHub Desktop.
Save leowebguy/eb2479f98590cfc2b5c1d379b64ee998 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Validation (18+, february months, zip code...) + Bootstrap Dialog + Ajax ... complete Form
Raw
form.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>jQuery Validation + Bootstrap Dialog + Ajax</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form name="registration" action="process.php" method="post" role="form">
<div class="row">
<div class="col-md-9">
<h4>Information</h4><br>
<div class="row">
<div class="col-md-6 field">
<label for="firstName">First Name:</label>
<div class="form-group">
<input class="form-control" type="text" name="firstName">
</div>
<div class="error"></div>
</div>
<div class="col-md-6 field">
<label for="lastName">Last Name:</label>
<div class="form-group">
<input class="form-control" type="text" name="lastName">
</div>
<div class="error"></div>
</div>
<div class="clearfix"></div>
<div class="col-md-6 field">
<label for="addressOne">Address 1:</label>
<div class="form-group">
<input class="form-control" type="text" name="addressOne">
</div>
<div class="error"></div>
</div>
<div class="col-md-6 field">
<label for="addressTwo">Address 2: <em>(optional)</em>
</label>
<div class="form-group">
<input class="form-control" type="text" name="addressTwo">
</div>
<div class="error"></div>
</div>
<div class="clearfix"></div>
<div class="col-md-6 field">
<label for="city">City:</label>
<div class="form-group">
<input class="form-control" type="text" name="city">
</div>
<div class="error"></div>
</div>
<div class="col-md-4 field">
<label for="state">State:</label>
<div class="form-group">
<select class="form-control" name="state">
<option value="">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="DC">District Of Columbia</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="IA">Iowa</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="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</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="UT">Utah</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>
<div class="error"></div>
</div>
<div class="col-md-2 field">
<label for="zip">ZIP Code:</label>
<div class="form-group">
<input class="form-control disabled" type="text" name="zip" maxlength="5">
</div>
<div class="error"></div>
</div>
<div class="clearfix"></div>
<div class="col-md-6 field">
<label for="email">E-mail:</label>
<div class="form-group">
<input class="form-control" type="text" name="email" maxlength="60">
</div>
<div class="error"></div>
</div>
<div class="col-md-6 field">
<label>What is your birthday?</label>
<div class="form-group">
<div class="row">
<div class="col-xs-5">
<select class="form-control" name="dobMonth">
<option value="" selected="selected">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="dobDay" placeholder="Day" maxlength="2">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="dobYear" placeholder="Year" maxlength="4">
</div>
</div>
</div>
<div class="error"></div>
</div>
</div>
</div>
<span class="space sm"></span>
<div class="col-md-12 field relative content-white-box">
<div class="check-acknow" style="position: absolute;">
<label>
<input type="checkbox" name="acknowledge" required="true">
</label>
</div>
<div class="copy-acknow" style="padding-left: 20px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="error"></div>
</div>
<span class="space md"></span>
<div class="col-md-12">
<br><a href="javascript:void(0);" onclick="submitForm();" class="btn btn-default inline-block" id="submit-btn">Register</a>
</div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment