JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<div class="container" ng-app="" ng-init="tag">
<div class="col-md-12">
<div class="col-md-4">
<form id="form">
<p>Account #:
<input type="text" class="form-control accountNumber" id="accountNumber" readonly>
</p>
<p>Hosting Domain:
<input type="text" class="form-control domain domainChk" id="domain" name="domain" ng-model="domain" placeholder="enter hosting domain name">
</p>
<br />
<p>Player placeholder class:
<input type="text" class="form-control playerClass" id="playerClass" ng-model="playerClass" name="playerClass" placeholder="player placeholder class"> <small>
</p>
<div class="col-md-8">
<div class="btn btn-default submit">Submit</div>
<p>
<div class="render-info"></div>
</p>
</div>
<div class="col-md-8 player-code">
<p>Copy and paste this script to your page</p> <pre>
CONTENT
</pre>
</form>
</div>
</div>
</div>
CSS
.container {
padding-top: 30px!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 {
/*background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;*/
padding-left: 16px;
margin-left: .3em;
color: red;
}
JavaScript
$(".player-code, .submit").hide();
//VALIDATION
$(function () {
$("#form").validate({
rules: {
playerClass: {
required: true
}
},
submitHandler: function () {
var accountNumber = $(".accountNumber").val();
var domain = $(".domain").val();
var playerClass = $(".playerClass").val();
var dataString = accountNumber + playerClass;
console.log('am i');
//Save Form Data........
$.ajax({
type: "POST",
dataType: "json",
url: "/",
contentType: "application/json",
data: dataString,
success: function () {
$(".player-code").show();
$('.render-info').html("<div class='alert alert-success'>You've successfully built your player code</div>");
},
failure: function () {
$('.render-info').html("<div class='alert alert-failure'>Submission Error</div>");
}
});
}
});
});
jQuery.validator.addMethod("domainChk", function (value, element, params) {
if (this.optional(element)) return true;
var regExp = new RegExp("^(?!www\\.|http:\/\/www\.)(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\\.)+([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$");
return regExp.test(value);
}, "Valid hostname required for player code");
jQuery.validator.addClassRules({
domainChk: {
domainChk: true
}
});
$('input[type="text"]').on('click keyup blur', function () {
if ($('#form').valid()) {
$(".submit").show();
} else {
$(".submit").hide();
}
});
//PREPOPULATE ACCOUNT FROM QUERY STRING
var url = window.location.href;
var regex = /=.*/; // match '=' and capture everything that follows
var accountId = url.match(regex);
//$(".accountNumber").val(accountId).remove("=");
//