forms - 使用欧芹进行流星形式验证

Question

我不知道这是怎么回事，我已经按照流星欧芹包上的步骤进行操作。

如果没有有效输入，我希望表单不是提交。虽然它在为 url 添加时显示未定义，但我想限制表单提交，直到它满足条件。

<form class="form-horizontal" role="form" id="addItem" data-parsley-validate>    
<div class="form-group form-group-sm">
  <label class="col-sm-2 control-label" 
         for="sm">Listing URL</label>
  <div class="col-sm-3">
    <input  type="url" 
            class="form-control" 
            id="listing_url" 
            placeholder="Enter the listing URL"
            data-required='true'
            data-type='url'
            data-trigger='change'/> 
  </div>
</div>
<div class="container ">
    <div class="panel-footer"> 
        <button class="btn btn-danger btn-md">Clear</button>
        <button class="btn btn-success btn-md pull-right submit">Submit</button>
    </div>
</div>

    Template.addItem.events({
  'click .submit': function() {
    var current_date = moment().format("DD-MM-YYYY hh:mm");
    var insertform = {
      created_at: current_date,
      url: $('#url').val()
    }
        console.log('insertform:', insertform);
        insertForm.insert(insertform);    
  }
})
Template.addItem.onRendered = (function () {
  // Setup parsley form validation
  // replace form with the id of your form
  $('#addItem').parsley({trigger: 'change'});
});

Answer 1

您需要检查表单是否有效，然后运行您的提交代码。

    var formValid = $('#addItem').parsley('validate')
    if (formValid)
    {
        var current_date = moment().format("DD-MM-YYYY hh:mm");
        var insertform = {
            created_at: current_date,
            url: $('#url').val()
         }
        console.log('insertform:', insertform);
        insertForm.insert(insertform); 
    }