0

当有这样的输入时：

<form action="go" method="post">
    <input name='submitthingy' required>
</form>

它应该只能在填写字段时提交。当我使用这样的提交按钮时，这有效：

<button type='submit'>Click Me</button>

它会出现一个小弹出窗口，要求填写该字段。但是，当我使用 javascript 提交它时，如下所示：

document.querySelector('form').submit();

它提交 from 但不验证该字段是否首先填写。我该怎么做？

4

4 回答 4

1

您可以给按钮一个 id 并调用 document.getElementById("btnsubmit").click()

如果您不想显示按钮，请添加显示无。

<button id='btnsubmit' type='submit' style='display:none;'>Click Me</button>
于 2016-03-25T01:37:28.830 回答
1

尝试调用提交按钮的点击操作，而不是表单的提交操作：

document.getElementsByTagName("button")[0].click();
于 2016-03-25T01:33:34.290 回答
1

从我的评论中说明 API：

var myform = document.getElementById('myform');
var fields = myform.querySelectorAll('input,textarea,select');
var test = document.getElementById('test');

test.addEventListener('click', function(evt) {
  var valid = Array.prototype.every.call(fields, function(field) {
    return field.checkValidity();
  });
  test.style.backgroundColor = valid ? "green" : "red";
});
<form id="myform">
  <p>
    <label for="dog">Dog:</label>
    <input pattern="Dog" id="dog" name="dog">
  </p>
</form>
<button id="test">Test</button>

于 2016-03-25T01:47:27.917 回答
0

处理此问题的 JavaScript 方法是使用约束验证 API在用户与其交互时检查每个字段，然后在表单提交时再次检查。

使用keyUp事件侦听器观察每个字段的更改以检查其有效性，然后使用submit事件侦听器在发送之前再次检查每个字段的值。下面我创建了一个示例，该示例无耻地从链接的 MDN 页面中进行了简单的编辑。

您的表单可能如下所示：

<!-- form disables HTML validation -->
<form novalidate>
    <label for='submitthingy'>
        <!-- input field and error span are in the same label -->
        <input id='submittable' name='submitthingy' required>
        <!-- error to be called by JavaScript -->
        <span class='error' aria-live='polite'></span>
    </label>
<button type='submit'>Click Me</button>
</form>

你的JS是这样的：

var form  = document.getElementsByTagName('form')[0];
var submitthingy = document.getElementById('submittable');
var error = document.querySelector('.error');

// One of these for each field, or you could DRY it up somehow
email.addEventListener("keyup", function (event) {
  if (submitthingy.validity.valid) {
    error.innerHTML = "";
    error.className = "error";
  }
}, false);
form.addEventListener("submit", function (event) {
  if (!submitthingy.validity.valid) {
    error.innerHTML = "This field is not valid per CSS pseudo class!";
    error.className = "error active";

event.preventDefault();
  }
}, false);

然后，您可以使用 CSS 设置错误消息的样式以默认隐藏它们，然后根据 class(es) 应用样式error active。

于 2016-03-25T01:40:10.813 回答