jquerysimpleformvalidation
Version:
A Simple jQuery Plugin for Form Validation.SimpleValidation is a simplified jquery plugin to achieve client side form validation.
109 lines (108 loc) • 4.34 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Simple Form Validation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="jquery-1.11.2.min.js"></script>
<script src="simpleValidation.js"></script>
</head>
<body>
<header id="Header">
<div class="container">
<img src="position2-logo.svg">
</div>
</header>
<div class="container">
<h2>JQuery Simple Form Validation</h2>
<form class="form-horizontal validationdemoform" action="http://position2.github.io/jQuery-Simple-Form-Validation/demo/" data-sfv-minlength="2" id="formsimplevalidation">
<div class="form-group">
<label for="inputFirstname" class="control-label">Firstname
<abbr title="required">*</abbr>
</label>
<input type="text" data-sfv-required="yes" class="form-control" data-sfv-minlength="3" id="inputfirstname">
</div>
<div class="form-group">
<label for="inputLastname" class="control-label">Lastname
<abbr title="required">*</abbr>
</label>
<input type="text" data-sfv-required="yes" class="form-control" data-sfv-minlength="1" id="inputlastname">
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email
<abbr title="required">*</abbr>
</label>
<input type="email" data-sfv-required="yes" class="form-control" id="inputemail">
</div>
<div class="form-group">
<label for="inputPhone" class="control-label">Phone
<abbr title="required">*</abbr>
</label>
<input type="text" data-sfv-required="yes" class="form-control" data-sfv-regEx="[+]\d{2}[(]\d{2}[)]\d{4}[-]\d{4}" data-sfv-regEx-errorMsg="Please enter valid Phone no" placeholder="+99(99)9999-9999" id="inputphone">
</div>
<div class="form-group">
<label for="inputStreet" class="control-label">Street
<abbr title="required">*</abbr>
</label>
<input type="text" data-sfv-required="yes" class="form-control" data-sfv-minlength="null" id="inputstreet">
</div>
<div class="form-group">
<label for="inputCity" class="control-label">City
<abbr title="required">*</abbr>
</label>
<input type="text" data-sfv-required="yes" class="form-control" id="inputcity">
</div>
<div class="form-group">
<label for="inputCountry" data-sfv-required="yes" class="control-label">Country
<abbr title="required">*</abbr>
</label>
<select name="" data-sfv-required="yes" class="form-control" id="inputcountry">
<option value="">Select Country</option>
<option value="US">United States</option>
<option value="IN">India</option>
</select>
</div>
<div class="form-group">
<label for="inputWebsite" class="control-label">Website</label>
<input type="text" class="form-control" id="inputwebsite">
</div>
<div class="form-group gender">
<label class="control-label">Sex
<abbr title="required">*</abbr> :
</label>
<div class="radio">
<label>
<input type="radio" data-sfv-required="yes" name="gender" id="optionsRadios1" value="Male"> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" data-sfv-required="yes" name="gender" id="optionsRadios2" value="Female"> Female
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox terms_cond">
<input type="checkbox" name="t&c" id="t&c" data-sfv-required="yes" data-sfv-require-errorMsg="Please accept terms & condition">
<label for="t&c">
<abbr title="required">*</abbr> I accept the Terms and Conditions</label>
</div>
</div>
<div class="form-group submit">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<script>
$(document).ready(function() {
$("#formsimplevalidation").simpleValidation({
beforeSubmit : function() {
console.log("beforeSubmit")
}
});
})
</script>
</body>
</html>