在点击提交后检查输入是否为空，然后在该字段中插入一个值答案

【问题标题】：Check if input is emtpy AFTER hitting submit and THEN inserting a value into this field在点击提交后检查输入是否为空，然后在该字段中插入一个值
【发布时间】：2019-08-29 07:14:54
【问题描述】：

我有一个输入字段，如果用户没有填写输入，我希望插入一个标准文本，如“无输入”或“此字段未填写”作为 this 的值输入。

我有一些有效的代码，但是在用户提交表单之后，该字段已经填充了标准文本。因此，用户已经在输入字段中看到了标准文本，而没有机会自己填写。

var inputStandard = document.getElementById('inputField');

if(inputStandard.value.length == 0)
    inputStandard.value = "this field wasn't filled";

预期是： -user 打开表单 -user 将该字段留空 -点击提交 - 然后字段的值已更改，而不是在用户打开表单时更改

【问题讨论】：

标签： javascript dom input

【解决方案1】：

您需要使用表单上的事件onsubmit来验证您的表单如果输入不为空，此函数将返回true，否则它将在此输入中显示您的消息并返回false

function isValidForm() {

  var inputStandard = document.getElementById("inputField");

  if (inputStandard.value.length == 0) {
    inputStandard.value = "this field wasn't filled";
    return false;
  }

  return true;
}

<form id="form" onsubmit="return isValidForm()">
  <input type="text" id="inputField" />
  <input type="submit" />
</form>

【讨论】：

【解决方案2】：

document.getElementById('myForm').addEventListener('submit', check);

function check(e) {
  var inputStandard = document.getElementById('inputField').value;
  if (inputStandard !== "") {
    return true;
  } else {
    //when the form is empty do:
    document.querySelector('.err').innerHTML = "PLEASE FILL THE FORM WITH SOME DATA";
    e.preventDefault();
    return false;
  }
}

<form id="myForm">
  <input id="inputField">
  <input type="submit">
</form>
<p class="err"></p>

【讨论】：

请解释你的代码——返回后也不需要 else
输入数据后消息也不会消失
你可以去掉else语句，然后让if语句返回false，你要我解释什么？
再次提交后消息消失
提交时仍然存在。您应该在测试之前将其删除

【解决方案3】：

document.getElementById('inputField').addEventListener('change', function (evt) {
    if(evt.target.value.length == 0){
        evt.target.value = "this field wasn't filled";
        document.getElementById("mySubmit").disabled = true;
    }else
        document.getElementById("mySubmit").disabled = false;
});

【讨论】：

您的解决方案很好，但这不是他要求的解决方案。事件必须在表单上提交
我的解决方案不允许在完成inputField 之前提交表单，因为input submit 已禁用
是的，我明白了。但问题很明确Check if input is emtpy AFTER hitting submit and THEN inserting a value into this field...我说过，你的回答很好，但你绝不会解释为什么你使用这种方法而不是另一种方法