我有一个两步式表单的jQuery验证设置，表单正在按预期验证每个输入下的错误，并使用提交按钮从第一个屏幕到第二个屏幕选择菜单。
但是，当我启用Semantic-UI下拉模块来设置表单中的选择菜单时，选择菜单会按预期样式，但即使标记为必需，也不再显示错误。
这是初始标记：
<form id="signup" action="" method="post" name="signup">
<!-- Step 1 Screen -->
<div class="step-1-view">
<span class="step">Step 1 of 2</span>
<div class="name">
<input type="text" name="firstname" id="firstname" placeholder="First Name">
<input type="text" name="lastname" id="lastname" placeholder="Last Name">
</div>
<div class="email">
<input type="text" name="email" id="email" placeholder="Email">
</div>
<div class="specialty">
<select name="specialty" class="ui dropdown" id="specialty">
<option value="" disabled selected>Choose Specialty</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
</div>
<div class="buttons-wrap">
<a class="clear" href="#">Clear</a>
<a class="next" href="#">Next</a>
</div>
</div>
<!-- / Step 1 Screen -->
<!-- Step 2 Screen -->
<div class="step-2-view">
<span class="step">Step 2 of 2</span>
<div class="zip">
<input type="text" name="zip" id="zip" placeholder="Zip Code">
</div>
<div class="role">
<select name="role" class="ui dropdown" id="role">
<option value="" disabled selected>Role</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
</div>
<div class="buttons-wrap">
<a class="back" href="#">Back</a>
<button class="send">Send</button>
</div>
<label id="success" class="success">Thank you for signing up!</label>
</div>
<!-- / Step 2 Screen -->
</form>
在浏览器中，Semantic-UI修改了选择/下拉列表的标记：
<div class="specialty">
<div class="ui dropdown selection" tabindex="0">
<select name="specialty" id="specialty">
<option value="" disabled="" selected="">Choose Specialty</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
<i class="dropdown icon"></i>
<div class="default text">Choose Specialty</div>
<div class="menu" tabindex="-1">
<div class="item" data-value="1">Option 1</div>
<div class="item" data-value="1">Option 2</div>
<div class="item" data-value="1">Option 3</div>
<div class="item" data-value="1">Option 4</div>
<div class="item" data-value="1">Option 5</div>
</div>
</div>
以下是表单验证脚本中的规则：
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
//email: true
validate_email: true // Custom, from new method
},
specialty: {
required: true
},
role: {
required: true
},
zip: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
}
}
正在调用选择菜单中的“专业”和“角色”，但在启用Semantic-UI时无效。
附加到“名称”和“电子邮件”非语义UI元素的错误标签（来自浏览器）：
<div class="name">
<input type="text" name="firstname" id="firstname" placeholder="First Name" class="error">
<label id="firstname-error" class="error" for="firstname">Please enter your first name</label>
<input type="text" name="lastname" id="lastname" placeholder="Last Name" class="error">
<label id="lastname-error" class="error" for="lastname">Please enter your last name</label>
</div>
<div class="email">
<input type="text" name="email" id="email" placeholder="Email" class="error">
<label id="email-error" class="error" for="email">Please provide a valid email address</label>
</div>
<div class="specialty">
<div class="ui dropdown selection" tabindex="0">
<select name="specialty" id="specialty">
<option value="" disabled="" selected="">Choose Specialty</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
<i class="dropdown icon"></i>
<div class="default text">Choose Specialty</div>
<div class="menu" tabindex="-1">
<div class="item" data-value="1">Option 1</div>
<div class="item" data-value="1">Option 2</div>
<div class="item" data-value="1">Option 3</div>
<div class="item" data-value="1">Option 4</div>
<div class="item" data-value="1">Option 5</div>
</div>
</div>
</div>
通过禁用Semantic-UI库（来自浏览器）附加到所有错误标签：
<div class="name">
<input type="text" name="firstname" id="firstname" placeholder="First Name" class="error">
<label id="firstname-error" class="error" for="firstname">Please enter your first name</label>
<input type="text" name="lastname" id="lastname" placeholder="Last Name" class="error">
<label id="lastname-error" class="error" for="lastname">Please enter your last name</label>
</div>
<div class="email">
<input type="text" name="email" id="email" placeholder="Email" class="error">
<label id="email-error" class="error" for="email">Please provide a valid email address</label>
</div>
<div class="specialty">
<select name="specialty" class="ui dropdown error" id="specialty">
<option value="" disabled="" selected="">Choose Specialty</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
<label id="specialty-error" class="error" for="specialty">Please select a specialty</label>
</div>
我确实需要Semantic UI用于选择元素样式，并且我知道Semantic UI拥有它自己的Validator - 但我坚持使用jQuery Validation来完成这个项目。
关于如何让这两个库很好地一起玩的任何想法？