JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.8.7/themes/south-street/jquery.ui.all.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<form class="cmxform" id="form1" name="form1" method="post" action="">
<fieldset style="width: 90%">
<div id="contenido1">
<table>
<tr>
<td align="left" class="uno" width="35%">Username</td>
<td align="left">
<input name="username" id="username" type="text" class="element" value="" />
</td>
</tr>
<tr>
<td align="left" class="uno">Role</td>
<td align="left">
<select name="role" id="role" class="element">
<option selected value="EU">External</option>
<option value="OP" >Operator</option>
<option value="MA">Manager</option>
<option value="AD" >Administrator</option>
</select>
</td>
</tr>
<tr>
<td align="left" class="uno">Department</td>
<td align="left">
<select name="department" id="department" class="element">
<option value=""></option>
<option value=1>Department 01</option>
<option value=2>Department 02</option>
<option ...
CSS
#username,#role,#password,#confirmation,#department { margin-left: .5em; float: left; }
label { float: left; font-family: Arial, Helvetica, sans-serif;}
br { clear: both; }
input,select { border: 1px solid black; margin-bottom: .5em; }
input.error,textarea.error,select.error { border: 1px solid red; }
label.error {
margin-left: .5em;
float: left;
color: red;
}
div#contenido1 table { margin: 1em 0; border-collapse: collapse; width: 90%;}
div#contenido1 table td { border: 1px solid #eee ; padding: .6em 10px; text-align: left; }
div#contenido1 table th { border: 1px solid #eee ; padding: .6em 10px; text-align: center; }
JavaScript
$(document).ready(function(){
$("button, input:submit, input:button").button();
var role = $("#role");
var department = $("#department");
if (role.val()=="EU"){
department.attr("disabled", false);
}
else{
department.attr("disabled", true);
}
role.change(function() {
if (role.val()=="EU"){
department.attr("disabled", false);
department.focus();
}
else{
department.removeClass("error");
department.attr("disabled", true);
department.next().hide();
$("#password").focus();
}
});
$("#form1").validate({
rules:{
username:{
required:true
},
password:{
required:true
},
confirmation:{
equalTo: "#password"
},
department:{
required: {
depends: function(element) {
return $("#role").val() == 'EU';
}
}
}
},
messages: {
department: 'Select a department.'
},
submitHandler: function(form) {
form.submit();
}
});
});