1

I'm using JQuery validation and a Bootstrap modal in an Aurelia application. The issue that I'm facing is when I hit the submit button on the modal the validation error message doesn't show up but if you click on the input the error message shows up. Why is validation behaving this way? 

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

Here is my JSFiddle if you want more information.

sbattou
  • 319
  • 3
  • 18
  • https://stackoverflow.com/users/594235/sparky you are closing my question without it really being answered. I checked out the answer you posted and it is somewhat related to my issue but I'm not in any way submitting the form. Maybe I'm missing something. – sbattou Dec 05 '18 at 15:31
  • REMOVE your `click` handler. The accepted answer in that duplicate explains how the `.validate()` method is for **initializing** the plugin. Same thing in this case. Your first click is initializing and then your second click is triggering validation. – Sparky Dec 05 '18 at 16:12
  • The click handler is there to capture the logic of the user clicking the submit button and I only want the validation to trigger then. So I can't just remove the click handler. Any suggestions? – sbattou Dec 05 '18 at 16:23
  • Call `.validate()` to initialize plugin on page load. Call `.valid()` when you want to programmatically trigger a validation test within an event handler function. You must initialize the plugin first... then you can call `.valid()` at any time. – Sparky Dec 05 '18 at 16:25
  • I just tried what you have recommended and it didn't work. Here is my updated JSFiddle http://jsfiddle.net/sbattoh/untvj758/ – sbattou Dec 05 '18 at 16:33
  • 1
    Check this out. The problem was that you were attempting to apply the validation to an element that didn't exist yet. Only after the form element was dynamically created could you then apply the validation rules. http://jsfiddle.net/YardGnomeNinja/hkf1n9mc/ – YardGnomeNinja Dec 05 '18 at 17:37
  • It worked, I really appreciate it @YardGnomeNinja – sbattou Dec 05 '18 at 17:41

0 Answers0