JSFiddle - React, Tailwind, and code Playground

by lalatino

HTML

<input type="hidden" id="Email_default" value="" />
<input type="textbox" class="emailValid" id="Email" name="Email" value="" />

JavaScript

var rules = {
    rules: {},
    messages: {}
};

function setRemoteValidation(el) {
    if ($("#" + $(el).attr("id") + "_default").val() != $(el).val()) {
        $(el).rules("add", {
            rules: {
                required: true,
                email: true,
                remote: "<?php echo base_url(); ?>home/checkmail"
            },
            messages: {
                required: "Please enter a valid email address",
                email: "Please enter a valid email address",
                remote: "This email address is already registered"
            }
        });
    }
    else {
        $(el).rules("remove", "remote");
    }
}

$(document).ready(function() {
    $(".emailValid").each(function() {
        rules.rules[$(this).attr("id")] = {
            required: true,
            email: true,
            remote: "<?php echo base_url(); ?>home/checkmail"
        };
        rules.messages[$(this).attr("id")] = {
            required: "Please enter a valid email address",
            email: "Please enter a valid email address",
            remote: "This email address is already registered"
        };
        $(this).change(function() {
            setRemoteValidation(this);
        });
        setRemoteValidation(this);
    });
    $("#editForm").validate(rules);
});