JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<form id="form2">
<div class="usernameAndDomain">

  <input type="hidden" name="usernameAndDomainValidation" class="required">

  <input data-index="" id="userName" name="userName" class="userName required" type="text" maxlength="100">
  <select class="domainForUser userDomain" name="userDomain">
  <option value="address1.com">@address1.com</option>
  <option value="address2.com">@address2.com</option>
  </select>
</div>
    <input type="submit" />
</form>
<a href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

CSS

a {
    display: block;
    position: absolute;
    bottom: 0;
}

JavaScript

$(document).ready(function () {
    
    $.validator.addMethod('usernameAndDomainCheck', function(value, element, params) {
/*         var field_1 = $('input[name="' + params[0] + '"]').val(),
            field_2 = $('input[name="' + params[1] + '"]').val();
        return parseInt(value) === parseInt(field_1) + parseInt(field_2); */
        return false;
    }, "Invalid form");

    $("#form2").validate({
        errorElement: "span",
        rules: {
            usernameAndDomainValidation: {
                usernameAndDomainCheck: ['userName', 'userDomain']
            },
        },
        submitHandler: function (form) { // for demo
            alert('valid form');
            return false;
        }
    });

});