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

Question

我正在构建一个表单，它使用heapBox (https://github.com/FilipBartos/heapbox)替代<select>元素，并使用jQuery validation进行表单验证。

heapbox验证只适用于具有jQuery属性的表单元素，因此，因为heapbox用div替换了<select>元素，所以它在验证过程中不被识别。

我有附加到每个输入的错误消息，然后还有显示在无效表单提交上的错误的总体摘要。有没有可能用javascript编写一些不使用插件的东西，只用于heapbox元素？我不确定我是否知道从哪里开始。

我知道我可以重新使用默认的<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的行为类似于suspect。它隐藏原始的select并替换它。

你需要做几件事，至少第一件事...

1. 激活对隐藏元素的验证，以便验证原始select元素。

jQuery(“#.validate-form”)忽略({ ignore：[]，//不忽略任何内容，验证所有内容//剩余选项...

您可以将ignore设置为[]，这意味着“不忽略任何内容”，或者如果有其他需要忽略的隐藏表单元素，则可以将其设置为其他选择器。

• 由于错误消息将紧跟在隐藏的select元素之后，因此您必须有条件地使用errorPlacement来修复此问题。

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

$('div.heapbox').on('mouseleave blur'，function() { $('selectname="findUs"').valid()；//触发select上的验证})；

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

注意到：HeapBox有，有几个和。您可能希望为您的项目使用更新、维护更好的插件。