这是因为语义UI插件正在取代
select
具有自己构造的元素。因此,用户不再与jQuery验证插件正在监视的内容进行交互。但是,当您在元素外部单击时,您将触发Validate插件的默认值
onfocusout
经办人;重新验证元素并清除错误。
解决方案是构造自己的事件处理程序,每当
选择
已更改。
$('[name="identifier"]').on('change', function() {
$(this).valid(); // force validation
});
$(function() {
$('#identifier').dropdown({
forceSelection: false
});
$.validator.setDefaults({
debug: true,
//jquery-validator has a panic attack about the search element not having a name tag.
ignore: ".search",
submitHandler: function() {
//$.blockUI({message: '<div id="parent"><div id="loaderIcon" class="loader"></div><div id="loaderText" >Working on it....</div></div>'});
return false;
}
});
$("#ticketform").validate({
rules: {
identifier: "required"
},
messages: {
identifier: "Please select an IP address"
},
errorPlacement: function(error, element) {
error.addClass("ui red pointing label transition");
error.insertAfter(element.closest('.ui.input'));
},
highlight: function(element, errorClass, validClass) {
alert("isError");
//$(element).parents(".row").addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
alert("isValid");
//$(element).parents(".row").removeClass(errorClass);
}
});
$('[name="identifier"]').on('change', function() {
$(this).valid(); // force validation
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<div class="ui grid sem">
<div class="four wide column"></div>
<div class="eight wide column">
<div class="ui secondary segment">
<form id="ticketform" name="ticketform" action="open_ticket.php" method="post" class="ui grid form" style="padding: 10px">
<input type="hidden" name="action" value="submit">
<div class="row field">
<label class="six wide column" for="identifier">Please Select an IP address</label>
<div class="eight wide column">
<div class="ui input">
<select name="identifier" class="ui fluid search selection dropdown" id="identifier">
<option value="" selected>Please choose...</option>
<option value="4.4.4.4">4.4.4.4</option>
<option value="8.8.8.8">8.8.8.8</option>
</select>
</div>
</div>
</div>
<div class="row">
<label class="six wide column"></label>
<div class="eight wide column">
<input id="button" type="submit" name="btnsubmit" value="Submit ticket" class="uibutton normal">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="four wide column"></div>
