JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<form class="cmxform" id="commentForm" method="post" action="" onsubmit="return submitform();">
            <fieldset>
                <legend>A simple comment form with submit validation and default messages</legend>
                <p>
                    <label for="cname">Name</label>
                    <em>*</em><input id="cname" name="name" size="25"   />
                </p>
                <p>
                    <label for="cemail">E-Mail</label>
                    <em>*</em><input id="cemail" name="email" size="25"  />
                </p>
                <p>
                    <label for="curl">URL</label>
                    <em>  </em><input id="curl" name="url" size="25"  value="" />
                </p>
                <p>
                    <label for="ccomment">Your comment</label>
                    <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
                </p>
                
                <div id="error_placement_div_name" ></div>
                
                <p>
                    <input class="submit" type="submit" value="Submit"/>
                </p>
            </fieldset>
</form>

<script>
            $(document).ready(function(){
                $("#commentForm").validate({
                    rules:{
                        name: {
                            required : true,
                            maxlength:5
                        },
                        email:{
                            required : true,
                            email:true
                        },
                        url:{
                            required : false,
                            url:true
                        }
                    },
                    messages:{
                        name:{
                            required:'Please enter a name'
                        },
                        email:{
                            required: "Please enter a valied...

CSS

* { font-family: Verdana; font-size: 96%; }
            label { width: 10em; float: left; }
            label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
            p { clear: both; }
            .err { color: red; }
            .submit { margin-left: 12em; }
            em { font-weight: bold; padding-right: 1em; vertical-align: top; }