Question

我正在构建一个使用heapBox（https://github.com/FilipBartos/heapbox）替换<select>元素的表单，并使用jQuery Validate进行表单验证。

jQuery Validate仅适用于具有name属性的表单元素，因为heapbox用div替换<select>元素，在验证过程中无法识别。

我有附加到每个输入的错误消息，然后是无效表单提交中出现的错误的总体摘要。是不是可以在javascript中编写一些没有使用插件的东西，仅用于堆箱元素？我不确定我知道从哪里开始。

我知道我可以回到使用默认的<select>元素并对样式进行有限的控制，但我真的想知道是否有办法解决这个问题。

这是我的代码：

<form class="form" id="register-form">
    <div class="form-group">
      <div class="form-fields">
        <label>Firstname</label>
        <input type="text" name="firstname" required/>
      </div>
      <div class="form-fields">
        <label>Lastname</label>
        <input type="text" name="lastname" required/>
      </div>
      <div class="form-fields">
        <label>Email address</label>
        <input type="email" name="email" required/>
      </div>
      <div class="form-fields">
        <label>Confirm email address</label>
        <input type="email" name="email_again" required/>
      </div>
      <div class="form-fields">
        <label>Telephone</label>
        <input type="tel" name="telephone" required/>
      </div>
      <div class="form-fields">
        <label>Mobile number</label>
        <input type="tel" name="mobile" required/>
      </div>
      <div class="form-fields">
        <label>How did you hear about us?</label>
        <select class="custom-select" name="findUs" required>
          <option value="default">Please select from the following...</option>
          <option value="Option 1">option 1</option>
          <option value="Option 2">option 2</option>
          <option value="Option 3">option 3</option>
          <option value="Option 4">option 4</option>
          <option value="Option 5"> option 5</option>
        </select>
      </div>
    </div>
</form>

$(".custom-select").heapbox();  

var submitted = false;
    var validator = jQuery("#register-form").validate({ 
        showErrors: function(errorMap, errorList) {
        var summary = "";
        if (submitted) {
            var summary = "";
            jQuery.each(errorList, function() {
            summary += "<li><label for='"+ this.element.name;
            summary += "' class='formError'>" + this.message + "</label></li>"; });
            jQuery("#error-messages").show();
            jQuery("#error-messages").find('.error-list ul').html(summary);
            submitted = false;
        }
        this.defaultShowErrors();
  },          
  invalidHandler: function(form, validator) { submitted = true; },
  onfocusout: function(element) { this.element(element); },
  errorClass: "error",
  rules: {

    },
    messages: {

    }          
});

提前致谢。

Answer 1

我怀疑HeapBox的行为类似于Chosen。它会隐藏原始select并替换它。

你需要做一些事情，至少是第一项......

激活隐藏元素的验证，以便验证原始select元素。
```
jQuery("#register-form").validate({
    ignore: [],  // ignore nothing, validate everything
    // remaining options...
```
您可以将ignore设置为[]，这意味着“忽略任何内容”，或者如果您需要忽略其他隐藏的表单元素，则可以将其设置为其他选择器。
< / LI>
由于错误消息将在隐藏的select元素之后立即附加，因此您必须有条件地使用errorPlacement来解决此问题。但是，由于您使用showErrors函数在其他地方构建消息，因此这是一个没有实际意义的点。

由于当用户与select元素进行交互时会触发验证，因此与HeapBox div 进行交互可能不会触发此元素的验证。如果是这种情况，请创建一个自定义处理程序来修复它。由于HeapBox开发人员的演示页面已经死了，对于我的示例，我将假设HeapBox div有一个.heapbox类......

$('div.heapbox').on('mouseleave blur', function() { $('select[name="findUs"]').valid(); // trigger validation on select });

因此，当mouseleave或blur事件触发HeapBox div时，附加到隐藏.valid()元素的select方法将被强制验证

注意： HeapBox有not been touched since Feb 2014，有几个open GitHub issues stretching back to 2013和the developer's official demo page is giving a 404。您可能希望为项目使用更新，更好维护的插件。

有没有办法使用jQuery Validate验证Heapbox元素？

1 个答案: