如果为空,则如何阻止提交HTML表单的输入字段值

Question

我有输入字段的HTML表单.一些输入可以为空,即值为"".

<input name="commentary" value="">

刚才,当commentary没有设置字段时,它会出现在提交网址中:&commentary=

如何从提交URL中删除空输入,因此当commentary输入为空时,它根本不会被传递.

非常感谢你.

更新

感谢minitech的回答,我可以解决它.JavaScript代码如下:

$('#my-form-id').submit(function() {
  var commentary = $('#commentary').val(); 
  if (commentary === undefined || commentary === "") {
    $('#commentary').attr('name', 'empty_commentary');
  } else {
    $('#commentary').attr('name', 'commentary');        
  }
});

我使用"empty_"作为前缀字段名称的唯一原因是IE无论如何都在URL中传递空名称.

Answer 1

据我所知,这只能通过JavaScript完成,所以如果你依赖这个功能,你需要进行重组.无论如何,这个想法是name从你不想要包含的输入中删除属性:

jQuery的:

$('#my-form-id').submit(function () {
    $(this)
        .find('input[name]')
        .filter(function () {
            return !this.value;
        })
        .prop('name', '');
});

没有jQuery:

var myForm = document.getElementById('my-form-id');

myForm.addEventListener('submit', function () {
    var allInputs = myForm.getElementsByTagName('input');

    for (var i = 0; i < allInputs.length; i++) {
        var input = allInputs[i];

        if (input.name && !input.value) {
            input.name = '';
        }
    }
});

如果您使用侦听器并取消,您可能还想在之后重置表单.

Answer 2

我不想更改输入元素（更改它们的名称，或将它们标记为禁用等），因为如果您返回，您可能会得到一个损坏的表单。

这是我的解决方案，它依赖于FormData：

window.addEventListener('load', function() {
  let forms = document.getElementsByClassName('skipEmptyFields');
  for (let form of forms) {
    form.addEventListener('formdata', function(event) {
      let formData = event.formData;
      for (let [name, value] of Array.from(formData.entries())) {
        if (value === '') formData.delete(name);
      }
    });
  }
});

Answer 3

不使用submit-type 输入，而是使用button-type 输入进行表单提交。-type 输入的 JavaScript 处理程序button应submit()在检查注释非空后调用表单的方法。您还应该提醒用户他们的错误（最好在页面上使用红色文本，而不是由 生成的弹出窗口alert()）。

请记住，您不应仅依赖客户端输入验证，因为始终可以从修改后的页面或直接通过 HTTP 发送表单。

Answer 4

您可能不想匹配单选按钮。如果表单包含选择，您也需要匹配它们。

使用 jQuery，你可能会使用这样的东西：

$('#form-id').submit(function() {
    $(this).find('input[type!="radio"][value=""],select:not(:has(option:selected[value!=""]))').attr('name', '');
});