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

IT技术 javascript html forms http-post
2021-01-19 10:45:02

我有带有输入字段的 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 中传递空名称。

5个回答

据我所知,这只能通过 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[value=''] 不起作用?
2021-03-15 10:45:02
回答我自己的问题。我终于设法使用以下选择器实现了我所需要的:$('select option[value=""]:selected').closest("select").attr('name', '');
2021-03-15 10:45:02
@feeela:嗯,我想你当时也可以这样做:)(不过,Chrome 上的默认弹出窗口看起来很糟糕……)
2021-03-19 10:45:02
@jazzcat 已修复。
2021-03-19 10:45:02
现在,在 2012 年,您还可以将 HTML5required属性用于现代浏览器,并将该 JS 用作条件回退。
2021-03-25 10:45:02

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

使用 jQuery,你可能会使用这样的东西:

$('#form-id').submit(function() {
    $(this).find('input[type!="radio"][value=""],select:not(:has(option:selected[value!=""]))').attr('name', '');
});
单线不错!
2021-03-28 10:45:02

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

请记住,你不应该依赖仅仅在客户端输入验证,但因为它总是可以从直接或修改的页面在HTTP发送的形式。

是的,这也是我的奇迹。不幸的是,我无法更改后端,即使它的行为并不常见。
2021-03-25 10:45:02
为什么后端需要这个?如果评论允许为空白,则后端需要接受提交的空白值。
2021-03-30 10:45:02
@josh.chavanne 使用提交输入与按钮对我的测试没有任何影响。
2021-04-06 10:45:02
这个答案是唯一提到 Submit 和 Button 工作方式不同的差异。默认情况下,所有具有空白值的命名文本字段不再提交。
2021-04-08 10:45:02
谢谢你。只是空洞的评论完全有效。只是服务器后端不以“&commentary=”的形式接受它。它要求在 post 请求中根本不应该存在这样的空参数。
2021-04-09 10:45:02

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

这是我的解决方案,它依赖于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);
      }
    });
  }
});
Internet Explorer 似乎不支持formData.entriesformData.deletedeveloper.mozilla.org/en-US/docs/Web/API/...
2021-04-10 10:45:02

谢谢@Ryan

这是我对此的完整解决方案。我使用 Jersey 和 @BeanParam 这解决了“”和空输入的问题

$('#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);

        }
    });
});
小心连接这样的字符串。最好使用encodeURIComponent
2021-04-08 10:45:02