如果 HTML 表單的輸入字段值為空，如何防止提交它

Question

我有帶有輸入字段的 HTML 表單。 一些輸入可以為空，即值為“”。

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

剛才，當沒有設置commentary字段時，它會出現在submit 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

我不想更改輸入元素（更改它們的名稱，或將它們標記為禁用等），因為如果返回，您可能會得到一個損壞的表單。

這是我的解決方案，它依賴於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 4

不要使用submit類型的輸入，而是使用button類型的輸入來提交表單。 button類型輸入的 JavaScript 處理程序應在檢查注釋非空后調用表單的submit()方法。 您還應該提醒用戶他們的錯誤（最好在頁面上使用紅色文本而不是由alert()生成的彈出窗口）。

請記住，你不應該僅僅依靠客戶端輸入驗證，但因為它總是可以從直接或修改的頁面在HTTP發送的形式。

Answer 5

謝謝@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);

        }
    });
});