JSFiddle - React, Tailwind, and code Playground

by ryleyb

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<form name="clientdetails_form" id="clientdetails_form" method="POST" action="xxxx.php">  

<p>
<label for="state">State</label>
<select type="text" name="state" >
<option value="NY">NY</option>
<option value="DE">DE</option></select>
</p>

<p>
<label for="LicenseN"><em>*</em>License #</label>
<input id="ClientLicensenNum"  name="ClientLicensenNum" type="text" value="" >
</p>    

<input type="submit" value="submit"  >    
</form>

CSS

.error { color:red; }

JavaScript

jQuery.validator.addMethod("DELicense", function(value, element) {
    if (this.optional(element)) {
        return true;
    }

    if ($('select[name="state"] option:selected').val() == 'DE') {
        return $(element).val().match(/^\d{6}$/);
    } else {
        return true;
    }
}, "DE Licenses must be 6 numbers");


$("#clientdetails_form").validate({
    rules: {
        ClientLicensenNum: {
            DELicense: true,
            required: true
        }
    },
    submitHandler: function() {
        alert('successful submit!');
    }
});