JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form id="MyForm" method="post" action="">

    <label for="firstname">Firstname</label>
    <input type="text" id="firstname" name="fisrtname" />
    
    <label for="lastname">Lastname</label>
    <input type="text" id="lastname" name="lastname" />
    
    <label for="companyname">Company Name</label>
    <input type="text" id="companyname" name="companyname" />
    
    <button type="submit" >Submit</button>
</form>

CSS

body, input {
 padding-left: 20px;   
 font-family: arial, helvetica, sans-serif;
}
label[for=firstname],
label[for=lastname],
label[for=companyname] {
 display: block;  
 margin-top: 10px;    
}

input {
 padding: 5px 8px;
 width: 150px;   
}

button {
 display: block; 
 margin-top: 10px; 
 padding: 5px 8px;    
}

.invalidElem {
 border: solid 2px red;   
}

label.error {
 display: inline;   
 margin-left: 20px;
 color: red;
}

JavaScript

$(function(){
    $("#MyForm").validate({
        rules: {
            fisrtname: {
                required: function () {
                    var company = $("#companyname").val();
                    return company == ""
                }
            },
            lastname: {
                required: function () {
                    var company = $("#companyname").val();
                    return company == ""
                }
            },
            companyname: {
                required: function() {
                    var first = $("#firstname").val();
                    var last = $("#lastname").val();   
                    return (first == "" || last == "")
                }
            }
        }
    });
});