JQuery验证多个组无法正常工作

时间:2013-07-30 13:27:50

标签: jquery jquery-validate

我正在使用下面的jQuery来验证多个组,但是在将我的代码更新到此链接中的方法之后:Jquery .validate require_from_group,我遇到的问题是除了第二组之外所有内容都已经过验证好之前。

  $("#contact-form").validate({
    groups: {
      links: "link_fb link_yt link_db",
      checkboxes: "tracking mixing mastering reamping editing other"
    },
    rules: {
      'link_fb': {
        require_from_group: [1, ".link_group"]
      },
      'link_yt': {
        require_from_group: [1, ".link_group"]
      },
      'link_db': {
        require_from_group: [1, ".link_group"]
      },
      'tracking': {
        require_from_group: [1, ".checkbox_group"]
      },
      'mixing': {
        require_from_group: [1, ".checkbox_group"]
      },
      'mastering': {
        require_from_group: [1, ".checkbox_group"]
      },
      'reamping': {
        require_from_group: [1, ".checkbox_group"]
      },
      'editing': {
        require_from_group: [1, ".checkbox_group"]
      },
      'other': {
        require_from_group: [1, ".checkbox_group"]
      }
    },
    errorPlacement: function (error, element) { 
      console.log(element[0])
      if(element[0].value === "tracking")
      {
        error.insertBefore(element);
      }
      else {
        error.insertAfter(element);
      }
    }
  });

以下是表单的标记:

<!--Request Quote modal-->
<div id="request-quote" class="modal hide fade" tabindex="-1" data-width="760">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Request a quote</h3>
  </div>
  <form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
  <div class="modal-body contact-body"> 
    <div class="row-fluid">
      <div class="span12">
        <h4>*All information is required unless otherwise specified</h4>
        <p><label>Full Name</label>
        <input name="name" type="text" class="span12" required></p>
        <p><label>Band Name</label>
        <input name="band_name" type="text" class="span12" required></p>
        <p><label>Email</label>
        <input name="email" type="email" class="span12" required></p>
      </div>
    </div>
    <div class="row-fluid">
      <h5 class="span12">Links to your band (at least one is required)</h5>
    </div>
    <div class="row-fluid">
      <div class="span12">
        <p><label>Facebook</label>
        <input name="link_fb" type="text" class="span12 link_group"></p>
        <p><label>YouTube</label>
        <input name="link_yt" type="text" class="span12 link_group"></p>
        <p><label>Dropbox (Send me some of your band's prior material)</label>
        <input name="link_db" type="text" class="span12 link_group"></p>
      </div>
    </div>
    <div class="row-fluid">
      <h5 class="span12">What are you looking for?</h5>
    </div>
    <div class="row-fluid">
      <div class="span4">
        <p><label>Select all that apply:</label></p>
        <p class="form-boxes"><label class="hand">
        <input name="tracking" type="checkbox" value="tracking" class="checkbox_group"> Tracking
        </label>
        <label class="hand">
        <input name="mixing" type="checkbox" value="mixing" class="checkbox_group"> Mixing
        </label>
        <label class="hand">
        <input name="mastering" type="checkbox" value="mastering" class="checkbox_group"> Mastering
        </label>
        <label class="hand">
        <input name="reamping" type="checkbox" value="reamping" class="checkbox_group"> Reamping
        </label>
        <label class="hand">
        <input name="editing" type="checkbox" value="editing" class="checkbox_group"> Editing
        </label>
        <label class="hand">
        <input name="other" type="checkbox" value="other" class="checkbox_group"> Other
        </label></p>
      </div>
      <div class="span8">
        <p><label>Number of Songs</label>
        <input name="songs" type="text" class="span12" required></p>
        <p><label>Explain your project/needs (and if you selected "other", please clarify)</label>
        <textarea name="comments" class="span12" required></textarea></p>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-inverse">Close</button>
    <button type="submit" class="btn btn-primary">Send</button>
  </div>
  </form>
</div>
<!--/Request Quote modal-->

任何人都有任何想法是什么?

谢谢!

修改

这是最新的require_from_group方法(不在主github分支中),你会看到我的问题:

jQuery.validator.addMethod("require_from_group", function(value, element, options) {
  var numberRequired = options[0];
  var selector = options[1];
  var fields = $(selector, element.form);
  var filled_fields = fields.filter(function() {
    // it's more clear to compare with empty string
    return $(this).val() != ""; 
  });
  var empty_fields = fields.not(filled_fields);
  // we will mark only first empty field as invalid
  if (filled_fields.length < numberRequired && empty_fields[0] == element) {
    return false;
  }
  return true;
// {0} below is the 0th item in the options field
}, jQuery.format("Please fill out at least {0} of these fields."));

EDIT2:

这是一个显示问题的jsfiddle。

http://jsfiddle.net/THinesley/mnEVj/1/

0 个答案:

没有答案