使用循环更改 Javascript 中的背景颜色

Question

在 JavaScript 中，我试图检查必填字段是否为空。如果输入字段为空，我正在遍历数组并尝试更改输入字段的背景。

但是，这样做并没有按预期工作。

document.getElementById(String(fields[i])).style.color("red");

这是我的 css 文件

* {

    margin: 0px; 

    padding: 0px; 

    box-sizing: border-box;

}

body, html {

  background: #DCD8D7;

    height: 100%;

    font-family: Helvetica, sans-serif;

}

p {

    font-family: Helvetica;

    font-size: 14px;

    line-height: 1.7;

    color: #616060;

    margin: 0px;

}

input {

    outline: none;

    border: none;

}

textarea {

  outline: none;

  border: none;

}

.container {

  width: 100%;  

  min-height: 100vh;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  padding: 10px;

  background: transparent;

  position: relative;

}

.form-wrap {

  width: 770px;

  background: #fff;

  border-radius: 10px;

  overflow: hidden;

  position: relative;

}

.contact-title {

  width: 100%;

  position: relative;

  z-index: 1;

  display: flex;

  flex-wrap: wrap;

  flex-direction: column;

  align-items: center;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  padding: 64px 15px 64px 15px;

}

.contact-title::before {

  content: "";

  display: block;

  position: absolute;

  z-index: -1;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-color: rgba(54,84,99,0.7);

}

.contact-form {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  padding: 43px 88px 57px 190px;

}

.div-input-form {

  width: 100%;

  position: relative;

  border-bottom: 1px solid #b2b2b2;

  margin-bottom: 26px;

}

.input-label {

  font-family: Helvetica;

  font-size: 15px;

  color: #808080;

  line-height: 1.2;

  text-align: right;

  position: absolute;

  top: 14px;

  left: -105px;

  width: 80px;

}

.user-input {

  font-family: Helvetica;

  font-size: 15px;

  color: #525050;

  line-height: 1.4;

  display: block;

  width: 100%;

  background: transparent;

  padding: 0 5px;

}

input.user-input {

  height: 45px;

}

Answer 1

你不能那样用style.color。您正在尝试更改数组中某个项目的颜色，而不是该项目本身。这也不是改变背景颜色的方法。我添加了一个调用required所需元素的类。然后我得到了这些项目并在for-loop. 这可能不是获得答案的最佳方式，但您会想要这样的东西。我添加了确定需要在alert错误中填充哪个错误字段的功能。如果您确实填充了错误，则在您下次提交表单时红色背景会消失。希望这可以帮助您走上正轨。* {&nbsp; &nbsp; margin: 0px;&nbsp;&nbsp; &nbsp; padding: 0px;&nbsp;&nbsp; &nbsp; box-sizing: border-box;}body, html {&nbsp; background: #DCD8D7;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; font-family: Helvetica, sans-serif;}p {&nbsp; &nbsp; font-family: Helvetica;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; line-height: 1.7;&nbsp; &nbsp; color: #616060;&nbsp; &nbsp; margin: 0px;}input {&nbsp; &nbsp; outline: none;&nbsp; &nbsp; border: none;}textarea {&nbsp; outline: none;&nbsp; border: none;}.container {&nbsp; width: 100%;&nbsp;&nbsp;&nbsp; min-height: 100vh;&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; padding: 10px;&nbsp; background: transparent;&nbsp; position: relative;}.form-wrap {&nbsp; width: 770px;&nbsp; background: #fff;&nbsp; border-radius: 10px;&nbsp; overflow: hidden;&nbsp; position: relative;}.contact-title {&nbsp; width: 100%;&nbsp; position: relative;&nbsp; z-index: 1;&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; flex-direction: column;&nbsp; align-items: center;&nbsp; background-repeat: no-repeat;&nbsp; background-size: cover;&nbsp; background-position: center;&nbsp; padding: 64px 15px 64px 15px;}.contact-title::before {&nbsp; content: "";&nbsp; display: block;&nbsp; position: absolute;&nbsp; z-index: -1;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; top: 0;&nbsp; left: 0;&nbsp; background-color: rgba(54,84,99,0.7);}.contact-form {&nbsp; width: 100%;&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; justify-content: space-between;&nbsp; padding: 43px 88px 57px 190px;}.div-input-form {&nbsp; width: 100%;&nbsp; position: relative;&nbsp; border-bottom: 1px solid #b2b2b2;&nbsp; margin-bottom: 26px;}.input-label {&nbsp; font-family: Helvetica;&nbsp; font-size: 15px;&nbsp; color: #808080;&nbsp; line-height: 1.2;&nbsp; text-align: right;&nbsp; position: absolute;&nbsp; top: 14px;&nbsp; left: -105px;&nbsp; width: 80px;}.user-input {&nbsp; font-family: Helvetica;&nbsp; font-size: 15px;&nbsp; color: #525050;&nbsp; line-height: 1.4;&nbsp; display: block;&nbsp; width: 100%;&nbsp; background: transparent;&nbsp; padding: 0 5px;}input.user-input {&nbsp; height: 45px;}textarea.user-input {&nbsp; min-height: 115px;&nbsp; padding-top: 14px;&nbsp; padding-bottom: 13px;}.div-submit-button {&nbsp; width: 100%;&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; padding-top: 8px;}.submit-button {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; padding: 0 20px;&nbsp; min-width: 160px;&nbsp; width: 100%;&nbsp; height: 50px;&nbsp; background-color: #3b88bb;&nbsp; border-radius: 25px;&nbsp; font-family: Helvetica;&nbsp; font-size: 16px;&nbsp; color: white;&nbsp; line-height: 1.2;}.radio-radio{&nbsp; &nbsp; &nbsp;-webkit-appearance: none;&nbsp; &nbsp; &nbsp;appearance: none;&nbsp; &nbsp; &nbsp;display: inline-block;&nbsp; &nbsp; &nbsp;position: relative;&nbsp; &nbsp; &nbsp;background-color: #f1f1f1;&nbsp; &nbsp; &nbsp;color: rgb(92, 91, 91);&nbsp; &nbsp; &nbsp;top: 10px;&nbsp; &nbsp; &nbsp;height: 25px;&nbsp; &nbsp; &nbsp;width: 25px;&nbsp; &nbsp; &nbsp;border: 0;&nbsp; &nbsp; &nbsp;border-radius: 40px;&nbsp; &nbsp; &nbsp;cursor: pointer;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;margin-right: 7px;&nbsp; &nbsp; &nbsp;outline: none;}.radio-radio:checked::before{&nbsp; &nbsp; &nbsp;position: absolute;&nbsp; &nbsp; &nbsp;font: 13px/1 'Open Sans', sans-serif;&nbsp; &nbsp; &nbsp;left: 8px;&nbsp; &nbsp; &nbsp;top: 5px;&nbsp; &nbsp; &nbsp;content: '\02143';&nbsp; &nbsp; &nbsp;transform: rotate(40deg);}.checkbox{&nbsp; &nbsp; &nbsp;border-radius: 5px;&nbsp; &nbsp; &nbsp;display: inline-block;&nbsp; &nbsp; &nbsp;margin-right: 7px;&nbsp; &nbsp; &nbsp;height: 10px;&nbsp; &nbsp; &nbsp;width: 10px;}.select-occ {&nbsp; display: block;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; font-family: sans-serif;&nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; color: rgb(53, 51, 51);&nbsp; &nbsp; line-height: 1.5;&nbsp; &nbsp; padding: 7px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; border: 1px solid #aaa;&nbsp; &nbsp; box-shadow: 0 1px 0 1px rgba(0,0,0,.04);&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; -moz-appearance: none;&nbsp; &nbsp; -webkit-appearance: none;&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; background-repeat: no-repeat, repeat;&nbsp; &nbsp; background-position: right .7em top 50%, 0 0;&nbsp; &nbsp; background-size: .65em auto, 100%;}#circle-container {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; width: 35vw;&nbsp; &nbsp; height: 35vh;&nbsp; &nbsp; position:relative;}.circle {&nbsp; width: 30vh;&nbsp; &nbsp; height: 30vh;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; border-radius: 50%;}#firstLayer {&nbsp; &nbsp; font-size: 23px;&nbsp; &nbsp; font-family: "Oswald", sans-serif;&nbsp; &nbsp; letter-spacing: 1.5px;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; color: white;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; transition: 1s;}#secondLayer {&nbsp; &nbsp; background-color: #CCCCFF&nbsp; &nbsp;;&nbsp; &nbsp; transition: 1s;&nbsp; &nbsp; opacity: 0.5;}#thirdLayer {&nbsp; &nbsp; background-color: black;&nbsp; &nbsp; transition: 1s;&nbsp; &nbsp; opacity: 0.5;}#fourthLayer {&nbsp; &nbsp; background-color: cornflowerblue;&nbsp; &nbsp; transition: 1s;&nbsp; &nbsp; opacity: 0.5;}#fifthLayer {&nbsp; &nbsp; background-color: #FFFF99;&nbsp; &nbsp; transition: 1s;&nbsp; &nbsp; opacity: 0.5;}#circle-effect {&nbsp; &nbsp; position:relative;&nbsp; &nbsp; width: 30vh;&nbsp; &nbsp; height: 30vh;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; overflow: hidden;}#circle-effect:hover #secondLayer {&nbsp; &nbsp; transform: translate(0px, 75px);}#circle-effect:hover #thirdLayer {&nbsp; &nbsp; transform: translate(0px, -75px);}#circle-effect:hover #fourthLayer {&nbsp; &nbsp; transform: translate(75px, 0px);}#circle-effect:hover #fifthLayer {&nbsp; &nbsp; transform: translate(-75px, 0px);}<!DOCTYPE html><html><head>&nbsp; &nbsp; <title>Contact Us</title>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="css/contact_form.css">&nbsp; &nbsp; <script type='text/javascript'>&nbsp; &nbsp; &nbsp; &nbsp; function validateForm() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var fname = document.forms["_contact_form"]["fname"].value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var lname = document.forms["_contact_form"]["lname"].value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var email = document.forms["_contact_form"]["email"].value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var input_message = document.forms["_contact_form"]["input_message"].value;&nbsp; &nbsp;&nbsp; var fields = document.getElementsByClassName("required");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (i=0;i<fields.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (fields[i].value === ""){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert("Please Enter a " + fields[i].name );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fields[i].style.backgroundColor = "red";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fields[i].style.backgroundColor = "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script></head><body>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="contact-title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="circle-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="circle-effect">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="circle" id="fifthLayer"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="circle" id="fourthLayer"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="circle" id="thirdLayer"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="circle" id="secondLayer"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="circle" id="firstLayer">Contact Me!</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form name = "_contact_form" class="contact-form" onsubmit="return validateForm()" action="contactform.php" method="POST">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="div-input-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="input-label">First Name: </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="fname" class="user-input required" type="text" name="firstName" placeholder="First Name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="div-input-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="input-label">Last Name: </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id = "lname" class="user-input required" type="text" name="lastName" placeholder="Last Name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="div-input-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="input-label">Email: *</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id = "email" class="user-input required" type="text" name="email" placeholder="Enter email addess">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="div-input-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="input-label">Phone:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="user-input" type="text" name="phone" placeholder="Enter phone number">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="div-input-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="input-label">Gender:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="radio-radio" name = "gender" value="Male"> Male </br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="radio-radio" name = "gender" value="Female"> Female </br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="radio-radio" name = "gender" value="Other"> Other </br> </br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="div-input-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="input-label">Occupation:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name = "dropdown" class="select-occ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Student">Student</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Teacher">Teacher</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="div-input-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="input-label">Age:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="radio-radio" name = "age" value="18orBelow"> 15 or Below </br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="radio-radio" name = "age" value="19to21"> 16 to 20 </br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="radio-radio" name = "age" value="21orAbove"> 21 or above </br> </br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="div-input-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="input-label">How Did You Hear About Us:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox" name="hearaboutus"> Internet Search<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox" name="hearaboutus"> Friends or Family<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox" name="hearaboutus"> Other<br> </br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="div-input-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="input-label">Message: *</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea id="input_message" class="user-input required" name="message" placeholder="Your Comment..."></textarea>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="div-submit-button" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id ='submit' name = 'submit-button' class="submit-button">Submit</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></body></html>

Answer 2

function validateForm() {&nbsp; &nbsp; var fields = [{name:'fname', value:''}, {name:'lname', value:''}, {name:'email', value:''}, {name:'input_message', value:''}];&nbsp; &nbsp; fields[0].value = document.forms["_contact_form"]["lname"].value;&nbsp; &nbsp; fields[1].value = document.forms["_contact_form"]["email"].value;&nbsp; &nbsp; fields[2].value = document.forms["_contact_form"]["input_message"].value;&nbsp; &nbsp; for (i=0;i<fields.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; if (fields[i].value.length == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Please Fill The Required Fields");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(fields[i].name).style.color("red");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}