meteor form validation using parsley

Question

I have no clue how this is going, I have followed the steps on meteor parsley package.

I want the form not the get submitted if there is no valid input. though it show undefined when added for the url, but I want to restrict form from submitting until it satisfies the condition.

<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

You need to check if the form's valid and then run your submit code.

    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); 
    }