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

那是因为Semantic UI插件正在用自己构造的元素替换select。因此，用户不再与jQuery Validate插件正在观看的内容进行交互。但是，当您单击元素外部时，您将触发Validate插件的默认onfocusout处理程序;元素被重新验证并且错误清除。

解决方案是构建自己的事件处理程序，只要select发生更改，就会以编程方式触发验证。

$('[name="identifier"]').on('change', function() {
    $(this).valid(); // force validation
});

＆＃13;

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

＆＃13;

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

＆＃13;

jquery-validator无法验证semantic-ui下拉列表

1 个答案: