JSFiddle - React, Tailwind, and code Playground

by mcgrailm

HTML

<script src="http://www.kinetick.com/JS/validation.js"></script>
<script src="http://www.kinetick.com/JS/jquery.validate.js"></script>
<form id="Update" action="" method="post" enctype="application/x-www-form-urlencoded">
    <ul>
        <li>
            <label for="UpdateCountry">Country*</label>
            
            <select name="UpdateCountry" id="UpdateCountry" tabindex="36">
                <option value="">Select country</option>
                <option value="">____________________</option>
                <option selected="selected" value="USA">United States</option>
                <option value="CAN">Canada</option>
                <option value="">____________________</option>
                <option value="AFG">Afghanistan</option>
                <option value="ALB">Albania</option>
                <option value="DZA">Algeria</option>
                <option value="ASM">American Samoa</option>
                <option value="AND">Andorra</option>
                <option value="AGO">Angola</option>
                <option value="AIA">Anguilla</option>
                <option value="ATA">Antarctica</option>
                <option value="ATG">Antigua and Barbuda</option>
                <option value="ARG">Argentina</option>
                <option value="ARM">Armenia</option>
                <option value="ABW">Aruba</option>
                <option value="AUS">Australia</option>
                <option value="AUT">Austria</option>
                <option value="AZE">Azerbaijan</option>
                <option value="BHS">Bahamas</option>
                <option value="BHR">Bahrain</option>
                <option value="BGD">Bangladesh</option>
                <option value="BRB">Barbados</option>
                <option value="BLR">Belarus</option>
                <option value="BEL">Belgium</option>
                <option value="BLZ">Belize</option>
                <option value="BEN">Benin</option>
                <option...

JavaScript

//Update Billing Form 
$.validator.addMethod("AusZip", function(value, element) {
    if (value.length < 4) {
        return false;
    } else return true;
}, "Australian Zip Code Must Be at least 4 Digits");

//Hungary
$.validator.addMethod("HunZip", function(value, element) {
    if (value.length < 4) {
        return false;
    } else return true;
}, "Hungarian Zip Code Must Be at least 4 Digits");

//and Bahrain
$.validator.addMethod("BHRZip", function(value, element) {
    if (value.length < 3) {
        return false;
    } else return true;
}, "Bahrain Zip Code Must Be at least 3 Digits");

//All other countries specified here, and this is where my problem is
$.validator.addMethod("RegZip", function(value, element) {
    if (value.length < 5) {
        return false;
    } else return true;
}, "Zip Code Must Be at least 5 Digits");


$('#UpdateCountry').change(function(){
    if (this.value === "AUS"){
        $('#input_to_validate').removeClass().addClass('AUSZip required')
    }
    //etc etc..
});


$("#Update").validate({
    errorElement: "span",
    errorPlacement: function(error, element) {
        error.appendTo(element.parent("li"));
    },
    submitHandler: function(form) {
        form.submit();
        return false;
    }
});