Javascript 如果 HTML 表单的输入字段值为空，如何防止提交它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8029532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent submitting the HTML form's input field value if it empty
提问by nonezumi
I have HTML form with input fields. Some of inputs can be empty, i.e. the value is "".
我有带有输入字段的 HTML 表单。一些输入可以为空，即值为“”。
<input name="commentary" value="">
<input name="commentary" value="">
Just now, when commentaryfield is not set, it appears in submit url like: &commentary=
刚才，当commentary没有设置字段时，它出现在提交网址中，如：&commentary=
How I can remove empty inputs from the submit url, so when the commentaryinput is empty it would not be passed at all.
我如何从提交 url 中删除空输入，因此当commentary输入为空时，它根本不会被传递。
Thank you very much.
非常感谢。
Update
更新
Thanks to minitechanswer, 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 中传递空名称。
回答by Ry-
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 nameattribute 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');
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 = '';
}
}
});
You might also want to reset the form afterwards, if you use a listener and cancel.
如果您使用侦听器并取消，您可能还想在之后重置表单。
回答by fduch
You probably don't want to match radio buttons. And if the form contains select's, you'll need to match them too.
您可能不想匹配单选按钮。如果表单包含选择，您也需要匹配它们。
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', '');
});
回答by Adam Zalcman
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()).
不要使用submit-type 输入，而是使用button-type 输入来提交表单。button-type 输入的 JavaScript 处理程序应submit()在检查注释非空后调用表单的方法。您还应该提醒用户他们的错误（最好在页面上使用红色文本而不是由 产生的弹出窗口alert()）。
Remember that you should not rely solelyon client-side input validation, though since it is always possible to send the form from a modified page or directly in HTTP.
请记住，你不应该依赖仅仅在客户端输入验证，但因为它总是可以从直接或修改的页面在HTTP发送的形式。
回答by ASH
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 这解决了“”和空输入的问题
$('#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);
}
});
});
