Oninvalid不起作用

Question

 function getExerciseTitle() {
  var exerciseTitle = $('<input/>', {
    'class': 'getExerciseTitle form-group form-control required',
    'type': 'text',
    'name': 'getExerciseTitle',
    'id': 'getExerciseTitle',
    'placeholder': 'Exercise title',
    'required': true,
    'oninvalid': this.setCustomValidity('Your exercise would like to have a title!'),
    'oninput': this.setCustomValidity('')
  });

  return exerciseTitle;
}

现在，每当我单击不带标题的提交时，它都不会显示必需的消息。它也没有提交，因此可以工作，但是边框只是变成红色，而不是也抛出必需的消息。