javascript - 由于空字段，如何使用 javascript 防止表单提交？

Question

如何在 javascript 中编写脚本以输出错误并防止表单中包含空字段的表单提交？假设表单名称为“form”，输入名称为“name”。我遇到了一些问题，PHP 并不总是能正确处理空字段，所以我想把它作为备份。任何帮助表示赞赏，谢谢。

Answer 1

HTML 代码：-

<form name='form'>
<input type="button" onclick="runMyFunction()" value="Submit form">
</form>

Javascript代码：-

  function runMyFunction()
    {
        if (document.getElementsByName("name")[0].value == "")
        {
            alert("Please enter value");
        }
        else
        {
            var form= document.getElementsByName("form")[0];
            form.submit();        
        }
    }

Answer 2

这是未经测试的代码，但它演示了我的方法。

它将检查“表单”中的任何文本字段是否有空值，如果有则取消提交操作。

当然，出于安全原因，您仍然必须检查 PHP 中的空字段，但这应该会减少使用空字段查询服务器的开销。

window.onload = function (event) {
    var form = document.getElementsByName('form')[0];
    form.addEventListener('submit', function (event) {
        var inputs = form.getElementsByTagName('input'), input, i;
        for (i = 0; i < inputs.length; i += 1) {
            input = inputs[i];
            if (input.type === 'text' && input.value.trim() === '') {
                event.preventDefault();
                alert('You have empty fields remaining.');
                return false;
            }
        }
    }, false);
};

Answer 3

克劳迪奥的回答很棒。这是一个简单的 js 选项。只是说如果字段为空则不做任何事情 - 如果不是则提交。

如果您需要验证多个，只需&&在 if 语句中添加一个运算符并添加相同的语法OtherFieldName

function checkForm(form1)
{
    if (form1.elements['FieldName'].value == "")
    {
        alert("You didn't fill out FieldName - please do so before submitting");
        return false;
    }
    else
    {
        form1.submit();
        return false;
    }
}

Answer 4

将事件处理程序附加到提交事件，检查是否设置了值（DEMO）。

var form = document.getElementById('test');

if (!form.addEventListener) {
    form.attachEvent("onsubmit", checkForm); //IE8 and below
}
else {
    form.addEventListener("submit", checkForm, false);
}

function checkForm(e) { 
    if(form.elements['name'].value == "") {
        e.preventDefault();
        alert("Invalid name!");   
    }
}