如何在用户单击提交后提醒用户多个字段在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]属性：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以创建一个变量并将验证乱码添加到该变量并显示它。示例

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这应该这样做，需要按照你喜欢的方式格式化它。还有几个库可以为你处理这个问题，例如。 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;
    }

}