javascript - 如果文本字段为空，则在提交时发出 Javascript 警报

Question

所以我想提醒用户如果他们提交带有空文本字段的表单

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：

$('#orderform').submit(function() {
    if($('#initials').length == 0){
        alert('Please fill out your initials.');
    }
});

Answer 1

只要确保你在某处返回 false -

$('#orderform').submit(function() {
    if($('#initials').val() == ''){
        alert('Please fill out your initials.');
        return false;
    }
});

Answer 2

$('#initials').length将检查元素是否存在。尝试这个：

$('#orderform').submit(function() {
    if($('#initials').val().length == 0){
        alert('Please fill out your initials.');
    }
});

正如 lewsid 指出的，如果你想取消提交，你也应该返回 false

Answer 3

$('#orderform').submit(function(e) {
    e.preventDefault();
    if(!$.trim((this + ' input').val()).length){
        alert('Please fill all the fields');
        return false;
    }
    return true;
});

但如果你用纯 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;
    }
}

所以在你的html中

<form onsubmit="return validate_form(this)">

在这一行：if(elems[i].type != 'submit')添加|| elems[i].class != 'your input class'添加例外

Answer 4

我会使用 e.preventDefault() 而不是 return false。Return false 还可以防止事件冒泡，如果您不理解这一点，可能会产生意想不到的后果。还将 preventDefault 嵌套在您的 if 中，如果情况良好，没有理由停止提交。

$('#orderform').submit(function(e) {
    if(!$.trim($(this).find('input[type="text"]').val()).length){
        e.preventDefault();
        alert('Please fill all the fields');
    }
});