Javascript 如何提醒用户在单击“提交”后HTML表单中有多个字段留空？

如果用户将多个字段留空，我希望在用户单击“提交”后，让用户知道在一条警报消息中他将哪些字段留空。我该怎么做？感谢您的帮助

以下是HTML代码：

<form id="contactform" action="">
    <label> Name
        <input name="firstname" type="text" id="firstname" maxlength="50" autofocus="autofocus" />
    </label>
    <label> Last Name
        <input name="lastname" type="text" id="lastname" maxlength="150" />
    </label>
    <label> Address
        <input name="address" type="text" id="address" maxlength="200" />
    </label>
    <label> Postcode
        <input name="postcode" type="text" id="postcode" maxlength="50" />
    </label>
    <label> City
        <input name="city" type="text" id="city" maxlength="100" />
    </label>
</form>
<input type="submit" value="Submit" onclick=" return validate()" />
<input type="reset" value="Clear" />

---

您可以使用HTML验证，即

[必需]

属性：

名称
姓
地址
邮政编码
城市

您可以创建一个变量，并将验证消息添加到该变量中，然后显示它。示例

函数验证（）{
var firstname=document.getElementById（'firstname'）；
var lastname=document.getElementById（'lastname'）；
var address=document.getElementById（'address'）；
var postcode=document.getElementById（'postcode'）；
var city=document.getElementById（'city'）；
var text=“确保”；
var valid=true；
如果（firstname.value==“”）{
text+=“第一个名字”；
有效=错误；
} 
如果（lastname.value==“”）{
text+=（！valid？'&'：''）+“姓氏”
有效=错误；
} 
如果（address.value==“”）{
text+=（！valid？&'：''）+“地址”；
有效=错误；
} 
如果（postcode.value==“”）{
text+=（！valid？'&'：''）+“邮政编码”；
有效=错误；
} 
如果（city.value==“”）{
text+=（！valid？'&'：''）+“城市”；
有效=错误；
} 
如果（！有效）{
文本+=“已填充”；
警报（文本）；
返回false；
}
返回true；
}

名称
姓
地址
邮政编码
城市
<代码> > p>你可以把所有空白字段放在一个字符串中，像这样：


函数验证（）{
var firstname=document.getElementById（'firstname'）；
var lastname=document.getElementById（'lastname'）；
var address=document.getElementById（'address'）；
var postcode=document.getElementById（'postcode'）；
var city=document.getElementById（'city'）；
var missedFields=“”
如果（firstname.value==“”）{
missedFields+=“名字。\n”；
//警报（“确保填写了名字字段”）；
//返回false；
}
如果（lastname.value==“”）{
missedFields+=“姓氏。\n”；
//警报（“确保姓氏字段已填写”）；
//返回false；
}
如果（address.value==“”）{
missedFields+=“地址。\n”；
//警报（“确保地址字段已填写”）；
//返回false；
}
如果（postcode.value==“”）{
missedFields+=“邮政编码。\n”；
//警报（“确保邮政编码字段已填写”）；
//返回false；
}
如果（city.value==“”）{
missedFields+=“城市。\n”；
//警报（“确保城市字段已填充”）；
//返回false；
}
如果（missedFields.length>0）{
警报（“完成所有字段：\n”+未命中字段）；
返回错误
}
返回true；
}

名称
姓
地址
邮政编码
城市

函数验证（）{
var firstname=document.getElementById（'firstname'）；
var lastname=document.getElementById（'lastname'）；
var address=document.getElementById（'address'）；
var postcode=document.getElementById（'postcode'）；
var city=document.getElementById（'city'）；
var errMsg=“”；
如果（firstname.value==“”）{
errMsg+=“确保填写了“名字”字段\n”；
} 
如果（lastname.value==“”）{
errMsg+=“确保姓氏字段已填充\n”；
} 
如果（address.value==“”）{
errMsg+=“确保地址字段已填充\n”；
} 
如果（postcode.value==“”）{
errMsg+=“确保已填写邮政编码字段\n”；
} 
如果（city.value==“”）{
errMsg+=“确保城市字段已填充\n”；
} 
如果（errMsg！=“”）{
警报（errMsg）；
返回false；
}否则{
返回true；
}
}

名称
姓
地址
邮政编码
城市
这里有一种方法可以做到这一点-添加到单个警报字符串：

function validate() {

var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var address = document.getElementById('address');
var postcode = document.getElementById('postcode');
var city = document.getElementById('city');
var alertstring = "Make sure all fields are filled! Currently missing:"

if(firstname.value == "") {
    alertstring += " -First Name-"
    } 

if(lastname.value == "") {
    alertstring += " -Last Name-"
    } 

if(address.value == "") {
    alertstring += " -Address-"
    } 

if(postcode.value == "") {
    alertstring += " -Postal Code-"
    } 
if(city.value == "") {
    alertstring += " -City-"
    } 
if(alertstring == "Make sure all fields are filled! Currently missing:") 
    {
        return true;
    }
else {
    alert(alertstring);
    return false;
    }

}
那么，您的代码现在可以工作了吗？据我所见，它会针对每个问题返回不同的警报。你想在一个警报中完成所有任务吗？
function validate() {

var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var address = document.getElementById('address');
var postcode = document.getElementById('postcode');
var city = document.getElementById('city');
var alertstring = "Make sure all fields are filled! Currently missing:"

if(firstname.value == "") {
    alertstring += " -First Name-"
    } 

if(lastname.value == "") {
    alertstring += " -Last Name-"
    } 

if(address.value == "") {
    alertstring += " -Address-"
    } 

if(postcode.value == "") {
    alertstring += " -Postal Code-"
    } 
if(city.value == "") {
    alertstring += " -City-"
    } 
if(alertstring == "Make sure all fields are filled! Currently missing:") 
    {
        return true;
    }
else {
    alert(alertstring);
    return false;
    }