JSFiddle - React, Tailwind, and code Playground

by ericburnley

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">

<div class="ui-content">
	<form id="email-form" method="post" class="validate basic_form" data-ajax="false">
		<label for="email" class="ui-hidden-accessible">To: Valid Email Address</label>
		<input class="required email" type="text" name="email" id="email" value="" placeholder="To: Valid Email Address" />
		<label for="subject" class="ui-hidden-accessible">Subject: Member ID Card</label>
		<input type="text" name="subject" id="subject" disabled="disabled" class="ui-disabled" value="Subject: Member ID Card" placeholder="" />
		<label for="submit-btn" class="ui-hidden-accessible">Send</label><br/>
		<input type="submit" id="submit-btn" value="Send" disabled="disabled" data-theme="a" class="ui-disabled btn-fullsize submit-btna"/>
	</form>
</div>

CSS

label.error {
	padding-left: 1em;
	width: 100%;
	float: none;
	font-size: 0.9em;
	display: block;
}

div.ui-input-text.error, div.ui-select.error {
	border: 2px solid #f60001;
	border-top: 2px solid #ba0101;
}
div.ui-input-text.valid, div.ui-select.valid {
	border: 2px solid green;
}

/* These were the original css styles, which were replaced by the 2 styles above.
.error{
	border: 2px solid #f60001;
	border-top: 2px solid #ba0101;
}
.valid {
	border: 2px solid green;
}
*/
em {
	color: #f60001;
	font-weight: bold;
	padding-right: .25em;
}

JavaScript

$(function() {
	
	$('.validate').on('keyup', DisableEnableSubmitBtn);
    
	$('.basic_form.validate').validate({
		invalidHandler: function(form, validator) {
			$('.ui-loader').hide();
		}
        /* Comment out the next lines to see how things fall out with previous jQM markup, which was <label /><input /> rather than <label /><div><input /></div>. */
        ,
		errorPlacement: function (error, element) {
			if (element.is('select')) {
				var parent = element.parents('div.ui-select');
				error.insertAfter(parent);
				parent.addClass('error');
			} else {
				var parent = element.parents('div.ui-input-text');
				error.insertAfter(parent);  
				parent.addClass('error');
			}
		},
		success: function(label){
				var myInput = label.attr('for');
				var parent = $('#' + myInput).parents('div.ui-input-text');
				parent.removeClass('error').addClass('valid');
		}
        /*  Comment out the above lines...*/
	});
});



function DisableEnableSubmitBtn() {
	var x = true;
	var me = $('.validate');
	$(me).find(".required").each(
	    function(){
		  if($(this).val().length == 0)
		  {
		    x = false;
		    return;
		  }
	    }
	);
	if (x)
	{
		$(me).find('.submit-btna')
             .removeClass('ui-disabled')
             .removeAttr('disabled')							
	    	 .parent()
             .removeClass('ui-disabled');
	}
	else
	{
		$(me).find('.submit-btna')
             .addClass('ui-disabled')
			 .attr('disabled','disabled')
			 .parent()
             .addClass('ui-disabled');
	}
}