如果文本字段为空，则提交时的 Javascript 警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16285649/
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
Javascript alert on submit if text field is empty
提问by codingninja
So i want to alert the user if they submit the form with an empty text field
所以我想提醒用户是否提交带有空文本字段的表单
HTML:
HTML：
<form id="orderform">
<input type="text" name="initials" id="initials" maxlength="3">
<p class="center">
<input type="image" src="#" id="submitbutton" name="submit" value="Place Order">
</p>
</form>
Javascript:
Javascript：
$('#orderform').submit(function() {
if($('#initials').length == 0){
alert('Please fill out your initials.');
}
});
回答by lewsid
Just make sure you return false in there somewhere-
只要确保你在某处返回 false-
$('#orderform').submit(function() {
if($('#initials').val() == ''){
alert('Please fill out your initials.');
return false;
}
});
回答by Sharlike
$('#initials').lengthwill check if the element exists. Try this:
$('#initials').length将检查元素是否存在。试试这个：
$('#orderform').submit(function() {
if($('#initials').val().length == 0){
alert('Please fill out your initials.');
}
});
as lewsid pointed out, you should also return false if you want to cancel the submit
正如 lewsid 指出的，如果你想取消提交，你也应该返回 false
回答by Memolition
$('#orderform').submit(function(e) {
e.preventDefault();
if(!$.trim((this + ' input').val()).length){
alert('Please fill all the fields');
return false;
}
return true;
});
but is better if you do this with pure JS not jQuery
但是如果你用纯 JS 而不是 jQuery 来做这件事会更好
function funnjsTrim(input) {
return input
.replace(/^\s\s*/, '')
.replace(/\s\s*$/, '')
.replace(/([\s]+)/g, '-');
}
validate_form = function(form, mssg){
mssg = form_errors[mssg] || 'Error: empty field';
var form_to = form.name,
elems = document.forms[form_to].getElementsByTagName("input");
for(var i = 0; i < elems.length + 1; i++) {
if(elems[i].type != 'submit') {
var string = funnjsTrim(elems[i].value);
if(!string.length) {
alert(mssg);
error = 'error';
return false
}
}
}
if(typeof error == "undefined"){
alert('Valid');
return true;
}
}
so in your html
所以在你的 html 中
<form onsubmit="return validate_form(this)">
in this line: if(elems[i].type != 'submit')add || elems[i].class != 'your input class'to add exceptions
在这一行中：if(elems[i].type != 'submit')添加|| elems[i].class != 'your input class'以添加例外
回答by Evan Borden
I'd use e.preventDefault() instead of return false. Return false also prevents events from bubbling and can have unintended consequences if you don't understand this. Also nest that preventDefault within your if, no reason to stop submission if things are good.
我会使用 e.preventDefault() 而不是 return false。Return false 还可以防止事件冒泡，如果您不理解这一点，可能会产生意想不到的后果。还在你的 if 中嵌套 preventDefault，如果事情好就没有理由停止提交。
$('#orderform').submit(function(e) {
if(!$.trim($(this).find('input[type="text"]').val()).length){
e.preventDefault();
alert('Please fill all the fields');
}
});
