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]的约束，constraint validation 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>

我应该使用JQuery对话框来显示/提交表单元素吗？

1 个答案: