jquery-验证器无法验证语义-ui 下拉菜单

Question

我正在尝试使用 jquery-validator 来验证使用 semantic-ui dropdown() 函数将 select 元素转换为可搜索文本框的表单。我遇到的问题是 jquery-validator 没有注意到 select 已被填充，直到您单击错误消息附近的某处。我认为除了单击时，它还应该在字段更改或失去焦点时进行验证。

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

jquery-验证器无法验证语义-ui 下拉菜单

jquery-validator cannot validate semantic-ui dropdowns

javascript

jquery

jquery-validate