html如何防止字段为空,如果HTML表單的輸入字段為空，如何避免提交

I have HTML form with input fields. Some of inputs can be empty, i.e. the value is "".

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

Just now, when commentary field is not set, it appears in submit url like: &commentary=

剛才，當評論字段未設置時，它出現在submit url中，如:&commentary=

How I can remove empty inputs from the submit url, so when the commentary input is empty it would not be passed at all.

如何從提交url中刪除空輸入，以便當注釋輸入為空時，根本不會傳遞它。

Thank you very much.

非常感謝。

Update

Thanks to minitech answer, I could resolve it. JavaScript code is below:

感謝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');

}

});

The only reason I have prefixed field name with "empty_" is that IE passes empty name in URL anyway.

我使用“empty_”前綴字段名的唯一原因是，IE在URL中傳遞空名稱。

4 个解决方案

#1

36

This can only be done through JavaScript, as far as I know, so if you rely on this functionality you need to restructure. The idea, anyway, is to remove the name attribute from inputs you don’t want included:

據我所知，這只能通過JavaScript完成，所以如果您依賴於此功能，就需要進行重構。不管怎樣，我們的想法是從輸入中移除不想包含的name屬性:

jQuery:

jQuery:

$('#my-form-id').submit(function () {

$(this)

.find('input[name]')

.filter(function () {

return !this.value;

})

.prop('name', '');

});

No jQuery:

jQuery:

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

myFrm.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 = '';

}

}

});

You might also want to reset the form afterwards, if you use a listener and cancel.

如果您使用偵聽器並取消，您可能還需要重新設置表單。

#2

3

You probably don't want to match radio buttons. And if the form contains select's, you'll need to match them too.

你可能不想匹配單選按鈕。如果表單包含select's，那么也需要匹配它們。

With jQuery, you might use something like this:

使用jQuery，您可以使用如下內容:

$('#form-id').submit(function() {

$(this).find('input[type!="radio"][value=""],select:not(:has(option:selected[value!=""]))').attr('name', '');

});

#3

2

Instead of using a submit-type input, use a button-type input for form submission. The JavaScript handler for the button-type input should call form's submit() method after checking that commentary is non-empty. You should also alert the user to their mistake (better with a red text on the page rather than the pop-up produced by alert()).

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

Remember that you should not rely solely on client-side input validation, though since it is always possible to send the form from a modified page or directly in HTTP.

請記住，您不應該僅僅依賴於客戶端輸入驗證，盡管從修改過的頁面或直接通過HTTP發送表單總是可能的。

#4

0

Thankyou @Ryan

謝謝@Ryan

This is my full solution for this. I use Jersey and @BeanParam and this fixes the problem of "" & null inputs

這是我的完整解。我使用了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);

}

});

});