Должен ли я использовать диалог JQuery для отображения / отправки элементов формы?

Question

Я работаю в системе, где диалог JQuery используется в качестве основного инструмента для отображения текста / элементов в диалоговом окне. Мне нужно отобразить форму с некоторыми элементами, которые должны быть проверены. Мне нравится использовать проверку HTML5 с шаблоном. Для того, чтобы использовать это мне нужно вызвать форму отправки. Мне интересно, как это может быть вызвано с помощью кнопки Сохранить / Отправить в диалоге JQuery?

Вот пример моего кода:

$(".add").on('click', addRecord);

function addRecord() {
  var form = $('<form name="frm_save" id="frm_save" autocomplete="off"></form>');
  var subject = $('<div class="form-group"><label class="control-label" for="title">Title:</label><input type="text" class="form-control" name="frm_title" id="frm_title"></div>').attr({
    pattern: "[a-zA-Z][A-Za-z '.,-:()]{0,50}$",
    title: "Allowed charachters: A-Za-z .,-():",
    maxlength: 50,
    required: true,
    placeholder: "Enter Title"
  });
  form.append(subject);
  displayForm(form, 'Add Record');
}

function saveRecord() {
  //Here I want to preventDefault() and run some checks before form gets submited.
  console.log('Submit');
}

function displayForm(msg, msgTitle, minH, width) {
  if (msgTitle == undefined) msgTitle = 'System Message';
  if (minH == undefined) minH = 100;
  if (width == undefined) width = 435;

  if (!$("#message-dialog").length) $("<div id='message-dialog'></div>").appendTo("body");

  $("#message-dialog").html(msg);
  $("#message-dialog").dialog({
    autoOpen: true,
    title: msgTitle,
    minHeight: minH,
    width: width,
    modal: true,
    position: {
      my: "center",
      at: "center",
      of: window
    },
    draggable: false,
    buttons: [{
        text: "Submit",
        class: "btn btn-primary",
        id: "btn_submit",
        click: function() {
          saveRecord(this);
        }
      },
      {
        text: "Close",
        class: "btn btn-primary",
        click: function() {
          $(this).dialog("close");
        }
      }
    ]
  });
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button class="add">Add</button>

Answer 1

Наличие элементов управления <form> и формы с атрибутом [required] уже охватывает базовую проверку (как пустое поле).При добавлении ограничений с помощью [type] или [pattern] API проверки ограничений покрывает его в 99% случаев.Следующая демонстрация отправляет тестовый сервер в режиме реального времени, в iframe будет отображаться ответ сервера.Входное значение намеренно недопустимо, поэтому отправьте форму как есть, чтобы проверить правильность.

<form id='main' action='https://www.hashemian.com/tools/form-post-tester.php' method='post' target='response'>
  <input id='test' name='test' type='email' value='byte2me.com' required><input type='submit'>
</form>
<iframe name='response'></iframe>