jQuery validate with AJAX
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<form>
<input type="tel" name="mobilenumber" />
<input type="submit" />
</form>
CSS
.error{
color: Red;
}
JavaScript
// regex validator
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input (Regex)"
);
// custom validator method for jQuery validator
// will return valid result for 0411112222
$.validator.addMethod("vnumber", function (value, element, params) {
var isValid = false;
var u = "http://110.142.96.71/Splendour/Virgin/IsVirginNumber?mobile=" + value;
alert(u);
$.ajax({
url: u,
type: "GET",
async:false,
//data: {
// number: value,
// configure AJAX response using JsFiddle echo
//delay: .5,
//json: JSON.stringify({ isValid: value == "0411112222" })
//},
success: function(response) {
alert('Hi');
//if (response.isValidVirginNumber == "true")
// isValid = true;
}
});
return isValid;
}, "Not a Virgin Number");
$("form").submit(function(e) {
e.preventDefault();
// validation rules
$("form").validate({ rules: {
mobilenumber: {
number: true,
regex: "^04[0-9]{8}",
vnumber: { message: "123" }}
} });
if($("form").valid())
{
alert("This is a valid number!");
}
});
// show qr code for current page URL
$(document).ready(function() {
$("body").append($("<img />").attr("src", "http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=" + encodeURIComponent(window.location)));
});