首次提交时未显示验证错误消息

Question

我在Aurelia应用程序中使用JQuery验证和Bootstrap模式。 我面临的问题是，当我点击模式上的“提交”按钮时，不会显示验证错误消息，但是如果您单击输入，则会显示错误消息。为什么验证采用这种方式？

var html = '<form id="form">';
for (var col in columns) {
  if (columns[col].type === 'text' && columns[col].edit) {
    html += '<input type="text" value="' + rowData[columns[col].data] + '" name="' + columns[col].data + '" placeholder="' + columns[col].data + '"/><br />';
  }
}

html += '<input type="hidden" name="rowIndex" id="rowIndex" value="' + rowIndex + '" />';
html += '<input type="submit" id="update"/></form>';
$('#dialog').html(html);
$("#dialog").modal();

$('body').on('click', '#update', function(e) {
  e.preventDefault();

  $("#form").validate({
    rules: {
      name: {
        required: true,
        minlength: 8
      },
      place: {
        required: true,
        minlength: 8
      }
    },
    messages: {
      name: {
        required: "Please enter some data",
        minlength: "Your data must be at least 8 characters"
      },
      place: {
        required: "Please enter some data",
        minlength: "Your data must be at least 8 characters"
      }
    }
  });
  var data = $('#form').serializeArray();
  var rowIndex = $('#rowIndex').val();
  var rowData = table.row(rowIndex).data();
  var newData = {};

  newData['order'] = rowData['order'];
  newData['delete'] = rowData['delete'];

  for (var d in data) {
    newData[data[d]['name']] = data[d]['value'];
  }

  table.row(rowIndex).data(newData).draw();
});

如果您需要更多信息，请在这里JSFiddle。