JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<div id= "content_box">
<h1>Here is the contact form you are looking for...</h1>
<br />
<form action="#" method="post" id="contactform">
 <label for="name">Your Name:</label>
 <input name="name" type="text" value="" class="commentform-input" id="name"/>
<br />
<br />

<label for="email">Your Email:</label>
<input name="email" type="text" value="" class="commentform-input" id="email"/>
<br />
<br />
<label for="message">Message:</label>
<textarea name="message" class="commentform-input" cols="70" rows="10" id="message"></textarea>
<br />
<input name="Submit" type="submit" value="Submit" class="input-submit"/></form>
</div><!-- END OF CONTENT BOX -->

CSS

input.error_class, textarea.error_class{
  background:#F7CBCA;
  border-left: 3px solid #a82222;
}
label.error { font-weight:bold; float: none; color: #a82222; padding-left: .5em; vertical-align: top;   font-size: 17px; font-family: "Times New Roman",times,serif;}
label.valid { font-weight:bold; float: none; color: #287211; padding-left: .5em; vertical-align: top;   font-size: 17px; font-family: "Times New Roman",times,serif;}

JavaScript

//array of success messages and randomly select one
var messages = ["Good!", "Great!", "Awesome!", "Super!", "Nice!","Yay!", "Success!", "Ok!", "Perfect!","Sweet!" ];
function successMessage() {
    return messages[Math.floor(Math.random() * messages.length)];
}

//start form validation code
$("#contactform").validate({
    debug: true,
    rules: {
        name: "required",
        email: {
            required: true,
            email: true
        },
        message:{
            required:true,
            minlength: 6
        }
    },
    messages: {
        name: "Please enter your name.",
        email: {
            required: "Please enter your e-mail.",
            email: "Please enter a valid e-mail."
        },
        message:{
            required: "Please enter a message.",
            minlength: "Please enter at least 6 characters."
        }
    },
    errorPlacement: function(label, element) {
        // position error label after generated textarea
        var name = element.attr('name');
        if ($('#' + name + '_label').length === 0) {
            
            label.attr('id', name + '_label');

            label.insertAfter(element);

            if (element.is("textarea")) {
                label.css({'padding-left': '105px'})
            }
        }
    },

    success: function(label) {
        var name = label.attr('for');
        $('#' + name + '_label').not('.valid').removeClass('error').addClass('valid').text(successMessage());
    }

}); //end form validate code