Question

我目前正在寻找Meteor的验证方法，并尝试了相同结果的Parsley.js和jqbootstrapvalidation。我已添加了两个软件包，但我的表单似乎没有用于验证，而是显示（我相信是）标准流星＆＃34;此字段是必需的＆＃34;弹出。

我试过了

        <input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />

与

 Template.createQuiz.rendered = function () {
$(function(){$(".validated").jqBootstrapValidation();});

}

纯粹的HTML

     <form class="form-horizontal">
    <div class="control-group warning">
        <label class="control-label">Email address</label>
        <div class="controls">
            <input type="email" aria-invalid="true">
            <p class="help-block"><ul role="alert"><li>Not a valid email address<!-- data-validator-validemail-message to override --></li></ul></p>
        </div>
    </div>
    <div class="form-actions"><button type="submit" class="btn btn-primary">Test Validation <i class="icon-ok icon-white"></i></button></div></form>

有没有人有一个工作示例或提示来使用jqbootstrap或parsley.js进行验证？非常感谢

编辑：

对于欧芹我试过

<form id="demo-form parsley" data-parsley-validate>

  <!-- this field is just required, it would be validated on form submit -->
  <label for="fullname">Full Name * :</label>
  <input type="text" name="fullname" required />

  <!-- this required field must be an email, and validation will be run on
  field change -->
  <label for="email">Email * :</label>
  <input type="email" name="email" data-parsley-trigger="change" required />

  <!-- radio and checkbox inputs by default have to be wrapped in a parent
  elemnt (here <p>) that will have success and error classes -->
  <label for="gender">Gender *:</label>
  <p>
    M: <input type="radio" name="gender" id="genderM" value="M" required />
    F: <input type="radio" name="gender" id="genderF" value="F" />
  </p>

  <!-- here, field is not required, it won't throw any error if no checkbox
  is checked. But if checked, two at least must be checked -->
   <label for="hobbies">Hobbies (2 minimum):</label>
   <p>
Skiing <input type="checkbox" name="hobbies" value="ski" data-parsley-mincheck="2" />
Running <input type="checkbox" name="hobbies" value="run" />
Eating <input type="checkbox" name="hobbies" value="eat" />
Sleeping <input type="checkbox" name="hobbies" value="sleep" />
Reading <input type="checkbox" name="hobbies" value="read" />
Coding <input type="checkbox" name="hobbies" value="code" />

<label for="heard">Heard us by *:</label>
   <select id="heard" required>
<option value="">Choose..</option>
<option value="press">Press</option>
<option value="net">Internet</option>
<option value="mouth">Word of mouth</option>
<option value="other">Other..</option>

  <!-- this optional textarea have a length validator that would be checked on keyup after 10 first characters, with a custom message only for minlength validator -->
  <label for="message">Message (20 chars min, 100 max) :</label>
  <textarea name="message" data-parsley-trigger="keyup" data-parsley-length="[20, 100]" data-parsley-validation-threshold="10" data-parsley-minlength-message = "Come on! You need to enter at least a 20 caracters long comment.."></textarea>

  <input type="submit" />
 </form>

然后：

Template.createQuiz.rendered = function () {
    $("#parsley").parsley();
};

Answer 1

创建一个引导控制组并在渲染函数中初始化验证。

<强>模板

<template name="createQuiz">
  <form class="form-horizontal">
    <div class="control-group">
      <label class="control-label">Email address</label>
      <div class="controls">
        <input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />
        <p class="help-block"></p>
      </div>
    </div>
  </form>
</template>

<强>代码

Template.createQuiz.rendered = function () {
  $(".validated").jqBootstrapValidation();
};

Answer 2

对于parsley.js几乎是相同的响应，你只需要将它添加到渲染函数

Template.createQuiz.rendered = function () {
    $('#yourFormId').parsley();
}

当然，您需要为表单元素添加必要的属性。

JQbootstrapvailadtion（或任何其他验证包）不与Meteor一起使用

2 个答案: