如果它为空，如何防止提交 HTML 表单的输入字段值

Question

我有带有输入字段的 HTML 表单。某些输入可以为空，即值为 ""。

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

刚才，当commentary字段没有设置时，它会出现在提交url中像：&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

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

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

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

Answer 3

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

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

Answer 4

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

这是我的解决方案，它依赖于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 5

谢谢@Ryan

这是我的完整解决方案。 我使用 Jersey 和 @BeanParam，这解决了 "" & null 输入的问题

$('#submitForm').click(function() {
    var url = "webapi/?";       
    var myForm = document.getElementById('myFormId');
    var allInputs = myForm.getElementsByTagName('input');

    for (var i = 0; i < allInputs.length; i++) {
        var input = allInputs[i];
        if (input.value != "" && input.name != "submitForm") {              
            url += input.name +'='+input.value+'&';
        }

    }
    console.log(url);

    $.ajax({
        method : "GET",
        url : url,

        data : {
        // data : "json",
        // method: "GET"
        },
        success : function(data) {
            console.log("Responce body from Server: \n" + JSON.stringify(data));
            $("#responce").html("");
            $("#responce").html(JSON.stringify(data));
        },
        error : function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus);

            console.log('Error: ' + errorThrown);

        }
    });
});