JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js"></script>
<form id="myForm">
    <span class="label">Try:</span> <input type="text" id="eduEmail1" name="eduEmail1" value="abc@email.com"/>
    <br />
    <span class="label">Try:</span> <input type="text" id="eduEmail2" name="eduEmail2" value="abc@email.edu"/>
    <br />
    <span class="label">Try:</span> <input type="text" id="eduEmail3" name="eduEmail3" value="abc@email.edu.fr"/>
    <br />
    <input type="submit" value=" Press me! "/>
</form>

CSS

.label {
    width: 65px;
    display: inline-block;
}

label.error {
    color: #f00;
    font-style: italic;
    font-size: .8em;
    padding-left: 5px;
}

JavaScript

$("#myForm").validate({
    rules: {
        eduEmail1: {
            required: true,
            email: true,
            accept: 'edu'
        },
        eduEmail2: {
            required: true,
            email: true,
            accept: 'edu'
        },
        eduEmail3: {
            required: true,
            email: true,
            pattern: /(\.edu\.\w\w\w?)$/
        }
    }
});