JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<form id="form">
<p>Hosting Domain:
<input type="text" class="form-control domain domainChk" id="domain" name="Domain" ng-model="domain" placeholder="enter hosting domain name">
</p>
</form>
CSS
body {
font-family: Knowledge;
}
.container {
padding-top: 70px!important;
}
.submit {
border-color: #ff9900;
}
.submit:hover {
border-color: #000;
background-color: #fff;
color: #ff9900;
}
input.error {
border: 1px solid red;
float: left;
}
label.error {
padding-left: 16px;
margin-left: .3em;
color: red;
}
.badge {
background-color: #ff9900!important;
color: #000!important;
}
.fade.in {
opacity: 1;
background-color: #eee;
}
.modal-title {
text-align: center;
}
JavaScript
$(function () {
$("#form").validate({
rules: {
domain: {
required: true
},
playerClass: {
required: true,
},
accountNumber: {
required: true
}
}
});
});
jQuery.validator.addMethod("domainChk", function (value, element, params) {
if (this.optional(element)) return true;
var regExp = new RegExp("^(http:\/\/www|https:\/\/www|https\://|http\://)?[a-zA-Z0-9\-\_\.]+\.[a-zA-Z]{2,3}(/\S*)?$");
return regExp.test(value);
}, "Valid hostname required for player code");
jQuery.validator.addClassRules({
domainChk: {
domainChk: true
}
});
//VALIDATE ON KEYUP
$('input[type="text"]').on('click keyup blur', function () {
if ($('#form').valid()) {
$(".submit").show();
} else {
$(".submit").hide();
}
});