Humane React: Example 02

by kaisershahid

HTML

<form id='example-01'>
<input type="checkbox" name="enableExpiration" />
<input type="text" name="expirationDate" disabled />
<div class="errorMessage" style="display: none; background: red; color: white">
</div>
</form>

JavaScript

var textbox = $("#example-01 input[name='expirateDate']");
var checkbox = $("#example-01 input[name='enableExpiration']");
var errorMessage = $("#example-01 .errorMessage");

var textbox = $("#example-01 input[name='expirationDate']");
var checkbox = $("#example-01 input[name='enableExpiration']");
checkbox.on('click', function(event) {
   if (event.currentTarget.checked) {
       textbox.prop('disabled', false);
   } else {
       textbox.val('').prop('disabled', true);
   }
});

textbox.on('blur', function(event) {
    console.log('blur');
    if (!textbox.val().match(/^[\w]+$/)) {
        errorMessage.show().html('Invalid date!');
    } else {
        errorMessage.hide();
    }
}).on('focus', function(event) {
    errorMessage.hide();
});