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。返回false也可以防止事件冒泡，如果您不理解这一点，可能会产生意想不到的后果。如果事情是好的话，还可以阻止在你的if，无理由停止提交。

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

如果文本字段为空，则提交Javascript警报

4 个答案: