JSFiddle - React, Tailwind, and code Playground

by acidrat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<form data-parsley-validate>
    <div class="row">
        <div class="col-md-3">
            <div class="form-group first-name-input"> <i class="fa fa-user cta-icon"></i>

                <input id="name" type="text" class="form-control input-lg" name="name" placeholder="Enter Your First Name" data-parsley-trigger="change" required>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group email-input"> <i class="fa fa-envelope cta-icon"></i>

                <input id="email" type="email" class="form-control input-lg" name="email" placeholder="Enter Your Email Address" data-parsley-trigger="change" required>
            </div>
        </div>
        <div class="col-md-5">
            <button type="submit" class="btn btn-block" style="margin-top: 0;">Submit&nbsp;<i class="fa fa-angle-double-right"></i>

            </button>
        </div>
    </div>
</form>

CSS

.first-name-input input, .email-input input {
    text-indent: 20px;
}
.fa-user, .fa-envelope {
    position: absolute;
    top: 15px;
    left: 30px;
    color: #bbb;
}
.cta-error {
    color: #a94442 !important;
}
.cta-success {
    color: #468847 !important;
}
input.parsley-success, textarea.parsley-success {
    color: #468847;
    border: 1px solid #d6e9c6;
    background-color: #dff0d8;
}
input.parsley-error, textarea.parsley-error {
    color: #b94a48;
    border: 1px solid #eed3d7;
    background-color: #f2dede;
}
ul.parsley-errors-list {
    font-size: 12px;
    margin: 2px;
    padding: 0;
    list-style-type: none;
}
ul.parsley-errors-list li {
    line-height: 12px;
    color: #a94442;
}
input.parsley-error::-webkit-input-placeholder {
    color: #a94442 !important;
}
input.parsley-error:-moz-placeholder {
    color: #a94442 !important;
}
input.parsley-error::-moz-placeholder {
    color: #a94442 !important;
}
input.parsley-error:-ms-input-placeholder {
    color: #a94442 !important;
}

JavaScript

$('form').parsley();

$.listen('parsley:field:error', function(ParsleyField) {
    ParsleyField.$element.prev('i.fa').removeClass('cta-success').addClass('cta-error');
});
$.listen('parsley:field:success', function(ParsleyField) {
    ParsleyField.$element.prev('i.fa').removeClass('cta-error').addClass("cta-success");    
});