JSFiddle - React, Tailwind, and code Playground

by brombomb

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<form id="myForm">
    <span class="label">Empty:</span> <input type="text" id="eduEmail1" name="eduEmail1" value=""/>
    <br />
    <span class="label">Not Email:</span> <input type="text" id="eduEmail2" name="eduEmail2" value="abc"/>
    <br />
    <span class="label">Not Edu:</span> <input type="text" id="eduEmail3" name="eduEmail3" value="abc@123.com"/>
    <br />
        <span class="label">Win:</span> <input type="text" id="eduEmail4" name="eduEmail4" value="abc@123.edu"/>
    <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

$.validator.addMethod("edu", function(value, element) {
    // Make it work optionally OR
    //  Check the last 4 characters and ensure they match .edu
    return (this.optional(element) || value.slice(-4) == ".edu");
}, "You must use a .edu email address");

$("#myForm").validate({
    rules: {
        eduEmail1: {
            required: true,
            email: true,
            edu: true
        },
        eduEmail2: {
            required: true,
            email: true,
            edu: true
        },
        eduEmail3: {
            required: true,
            email: true,
            edu: true
        },
        eduEmail4: {
            required: true,
            email: true,
            edu: true
        }
    }
});