jQuery Validation Form
HTML
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<div id="appendDiv"></div>
<form id="signup">
<fieldset>
<legend>Create a new account</legend>
<p>
<label for="email">Your Email</label>
<input id="email" name="email" type="email" required/>
</p>
<p>
<label for="verify_email">Confirm Email</label>
<input id="verify_email" name="verify_email" type="email" equalTo="#email" required/>
</p>
<p>
<label for="country">Country</label>
<input id="country" type="text" name="country" />
</p>
<p>
<label for="zipcode">Zip Code</label>
<input id="zipcode" digits="true" minlength="5" type="text" name="zipcode" />
</p>
<p>
<label for="password">Password</label>
<input id="password" type="password" name="password" required/>
</p>
<p>
<label for="verify_password">Confirm Password</label>
<input id="verify_password" type="password" name="verify_password" equalTo="#password" required/>
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</fieldset>
</form>
CSS
#signup {
width: 800px;
margin: 30px auto;
}
label {
width: 140px;
display: inline-block;
}
label.error {
color: red;
width: 300px;
}
JavaScript
$(document).ready(function () {
// $("#signup").validate();
$("#NameForm").validate();
});
$(function() {
var componentHTML = ""
var mainHTML = ""
var data = [{
"inputForm": "NameForm",
"onLoadTCLScript": "",
"onCompleteTCLScript": "",
"nextFormsIds": [],
"formType": "Vertical_Form",
"inputs": [{
"inputType": "PULLDOWN",
"displayLabel": "Country/Region",
"viewable": true,
"required": false,
"editable": false,
"isMultiselect": false,
"isEndCompnent": false,
"tooltip": "Select Country Name",
"choices": [{
"displayValue": "India",
"isDisabled": false,
"isSelected": false,
"placeholderValue": "India"
}, {
"displayValue": "Africa",
"isDisabled": false,
"isSelected": false,
"placeholderValue": "India"
}]
},
{
"inputType": "TEXTBOX",
"displayLabel": "Full Name",
"tooltip": "Enter Full Name",
"isMandatory": true,
"editable": true,
"viewable": true,
"isEndCompnent": false,
"predefined":"ek"
},
{
"inputType": "TEXTBOX",
"displayLabel": "Mobile No.",
"tooltip": "Enter Mobile No.",
"isMandatory": false,
"editable": true,
"viewable": true,
"isEndCompnent": false,
"placeholder": "Enter 10 digit"
},
{
"inputType": "TEXTBOX",
"displayLabel": "Pincode",
"tooltip": "Enter Pincode",
"isMandatory": false,
"editable": true,
"viewable": true,
"isEndCompnent": false,
"placeholder": "6 Digits Pincode"
},
{
"inputType": "TEXTBOX",
"displayLabel": "Street address",
"tooltip": "Enter Mobile No.",
"isMandatory": false,
"editable": true,
"viewable": true,
"isEndCompnent": false,
...