單擊提交后，如何提醒用戶在HTML表單中多個字段留空？

Question

如果用戶將多個字段留空，則我想讓用戶知道他單擊提交后在一條警報消息中哪些字段留空。 我該怎么做？ 任何幫助表示贊賞！

這是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" />

這是JavaScript代碼：

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');

    if (firstname.value == "") {
        alert("Make sure the first name field is filled");
        return false;
    }

    if (lastname.value == "") {
        alert("Make sure the last name field is filled");
        return false;
    }
    if (address.value == "") {
        alert("Make sure the address field is filled");
        return false;
    }
    if (postcode.value == "") {
        alert("Make sure the post code field is filled");
        return false;
    }
    if (city.value == "") {
        alert("Make sure the city field is filled");
        return false;
    }
    return true;
}

Answer 1

您可以使用HTML驗證，即[required]屬性：

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

Answer 2

您可以創建一個變量並將驗證消息添加到該變量並顯示它。

 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 text = "Make sure"; var valid = true; if(firstname.value == "") { text+= " the first name "; valid = false; } if(lastname.value == "") { text += ( !valid ? '& ' : '')+ " the last name " valid = false; } if(address.value == "") { text += ( !valid ? '& ' : '')+ " the address "; valid = false; } if(postcode.value == "") { text += ( !valid ? '& ' : '')+ " the postcode "; valid = false; } if(city.value == "") { text += ( !valid ? '& ' : '') + " the city "; valid = false; } if(!valid){ text+= " is Filled"; alert(text); return false; } return true; } 

 <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" /> 

Answer 3

您可以將所有空白字段放在字符串中，如下所示：

 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 missedFields = "" if (firstname.value == "") { missedFields += "First name.\\n"; //alert("Make sure the first name field is filled"); //return false; } if (lastname.value == "") { missedFields += "Last name.\\n"; //alert("Make sure the last name field is filled"); //return false; } if (address.value == "") { missedFields += "Adress.\\n"; //alert("Make sure the address field is filled"); //return false; } if (postcode.value == "") { missedFields += "Post code.\\n"; //alert("Make sure the post code field is filled"); //return false; } if (city.value == "") { missedFields += "City.\\n"; //alert("Make sure the city field is filled"); //return false; } if (missedFields.length > 0) { alert("Complete all fields:\\n" + missedFields); return false } return true; } 

 <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" /> 

Answer 4

 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 errMsg = ""; if(firstname.value == "") { errMsg+="Make sure the first name field is filled\\n"; } if(lastname.value == "") { errMsg+="Make sure the last name field is filled\\n"; } if(address.value == "") { errMsg+="Make sure the address field is filled\\n"; } if(postcode.value == "") { errMsg+="Make sure the post code field is filled\\n"; } if(city.value == "") { errMsg+="Make sure the city field is filled\\n"; } if(errMsg != "") { alert(errMsg); return false; }else { return true; } } 

 <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" /> 

應該做到這一點，需要按照自己的喜好格式化它。 也有幾個庫為您處理此問題，例如。 http://formvalidation.io/

Answer 5

這是您可以執行的一種方法-添加到單個警報字符串中：

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;
    }

}