jquery-validator無法驗證語義UI下拉列表

Question

我正在嘗試使用jquery-validator驗證使用語義UI dropdown（）函數將select元素轉換為可搜索文本框的表單。 我遇到的問題是jquery-validator直到您單擊錯誤消息附近的某個位置后，才注意到選擇已被填充。 我認為，除了單擊時，它還應該驗證字段何時更改或何時失去焦點。

 $(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); } }); }); 

 <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> 

Answer 1

那是因為語義UI插件正在用自己的構造元素替換select 。 因此，用戶不再與jQuery Validate插件正在觀看的內容進行交互。 但是，當您在元素外部單擊時，您將觸發Validate插件的默認onfocusout處理函數。 重新驗證元素並清除錯誤。

解決方案是構造您自己的事件處理程序，該事件處理程序將在更改select時以編程方式觸發驗證。

$('[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>