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

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

刚才，当未设置注释字段时，它会出现在提交url中，如：&注释=

如何从提交url中删除空输入，这样当注释输入为空时，它就不会被传递

多谢各位

使现代化 多亏了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_uuu的唯一原因是IE在URL中传递空名称。

不要使用提交类型输入，而是使用按钮类型输入进行表单提交。按钮类型输入的JavaScript处理程序应在检查注释是否为非空后调用表单的submit方法。您还应该在页面上用红色文本而不是alert生成的弹出窗口更好地提醒用户他们的错误

---

请记住，您不应该只依赖客户端输入验证，尽管从修改过的页面或直接在HTTP中发送表单始终是可能的。

据我所知，这只能通过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 = '';
        }
    }
});

---

如果使用侦听器并取消，您可能还需要在之后重置表单。

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

使用jQuery，您可能会使用以下内容：

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

谢谢你@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);

        }
    });
});

---

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

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

---

非常感谢。只是空洞的评论完全有效。只是服务器后端不接受&commentation=。它要求post请求中根本不存在这样的空参数。为什么后端要求这样？如果评论允许为空，后端需要接受提交的空白值。是的，这也是我的疑问。不幸的是，我不能改变后端，即使它的行为并不常见。这个答案只是提到了提交和按钮工作方式的不同。默认情况下，所有带空白值的命名文本字段不再提交。@josh.chavanne使用提交输入和按钮在我的测试中没有任何区别。现在，在2012年，您也可以使用HTML5要求的现代浏览器属性，并将该JS用作条件回退。@feeela：您当时也可以这样做，我想：默认的弹出窗口在Chrome上看起来很糟糕，但是…对输入很有效，但对选择字段无效。选择[value=]无效时，选择字段的语法是什么？回答我自己的问题。我最终使用以下选择器实现了我所需要的：$'select option[value=]：selected'.closestselect.attr'name'@jazzcat已修复。添加“disabled”属性$“commentation”。attr“disabled”、“disabled”是一种可能的解决方法，因此IE8不会在URL中传递空名称。不过也有一个副作用：在提交表单之前，所有空字段都会短暂变为灰色。实际上，使用$'Commentation'.attr'name'，null似乎在所有浏览器中都可以使用。$'Commentation'.removeAttr'name'也可以在所有浏览器中使用一行！小心连接这样的字符串。最好使用。Internet Explorer似乎不支持formData.entries和formData.delete。

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);
      }
    });
  }
});