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

克劳迪奥的答案很棒。这是一个简单的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 3

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

它会检查'form'中的任何文本字段是否为空值，如果有则取消提交操作。

当然，出于安全原因，您仍然需要检查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 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!");   
    }
}

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

4 个答案: