0

In JavaScript I am trying to check if the required fields are empty. I am looping over the array and trying to change the background of the input field if the field is empty.

However doing this is not working as expected.

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

Here is my Html File

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact Us</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/contact_form.css">
    <script type='text/javascript'>
        function validateForm() {
            var fname = document.forms["_contact_form"]["fname"].value;
            var lname = document.forms["_contact_form"]["lname"].value;
            var email = document.forms["_contact_form"]["email"].value;
            var input_message = document.forms["_contact_form"]["input_message"].value;


            var fields = new Array;
            var fields = [fname, lname, email, input_message];

            for (i=0;i<fields.length;i++){

                if (fields[i].length == 0){
                    alert("Please Fill The Required Fields");
                    document.getElementById(String(fields[i])).style.color("red");
                    return false;

            }
        }
    }

    </script>
</head>
<body>
    <div class="container">
        <div class="form-wrap">
            <div class="contact-title">
                <div id="circle-container">
                        <div id="circle-effect">
                        <div class="circle" id="fifthLayer"></div>
                        <div class="circle" id="fourthLayer"></div>
                        <div class="circle" id="thirdLayer"></div>
                        <div class="circle" id="secondLayer"></div>
                        <div class="circle" id="firstLayer">Contact Me!</div>
                        </div>
                    </div>
            </div>

            <form name = "_contact_form" class="contact-form" onsubmit="return validateForm()" action="contactform.php" method="POST">
                <div class="div-input-form">
                    <label class="input-label">First Name: </label>
                    <input id="fname" class="user-input" type="text" name="firstName" placeholder="First Name">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Last Name: </label>
                    <input id = "lname" class="user-input" type="text" name="lastName" placeholder="Last Name">

                </div>

                <div class="div-input-form">
                    <label class="input-label">Email: *</label>
                    <input id = "email" class="user-input" type="text" name="email" placeholder="Enter email addess">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Phone:</label>
                    <input class="user-input" type="text" name="phone" placeholder="Enter phone number">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Gender:</label>
                    <input type="radio" class="radio-radio" name = "gender" value="Male"> Male </br>
                    <input type="radio" class="radio-radio" name = "gender" value="Female"> Female </br>
                    <input type="radio" class="radio-radio" name = "gender" value="Other"> Other </br> </br>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Occupation:</label>
                    <select name = "dropdown" class="select-occ">
                        <option value="Student">Student</option>
                        <option value="Teacher">Teacher</option>
                    </select>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Age:</label>
                    <input type="radio" class="radio-radio" name = "age" value="18orBelow"> 15 or Below </br>
                    <input type="radio" class="radio-radio" name = "age" value="19to21"> 16 to 20 </br>
                    <input type="radio" class="radio-radio" name = "age" value="21orAbove"> 21 or above </br> </br>
                </div>

                <div class="div-input-form">
                </br>
                    <label class="input-label">How Did You Hear About Us:</label>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Internet Search<br>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Friends or Family<br>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Other<br> </br>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Message: *</label>
                    <textarea id="input_message" class="user-input" name="message" placeholder="Your Comment..."></textarea>
                </div>

                <div class="div-submit-button" >
                    <button id ='submit' name = 'submit-button' class="submit-button">Submit</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

and here is my css file

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

textarea.user-input {
  min-height: 115px;
  padding-top: 14px;
  padding-bottom: 13px;
}

.div-submit-button {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 8px;
}

.submit-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: 160px;
  width: 100%;
  height: 50px;
  background-color: #3b88bb;
  border-radius: 25px;
  font-family: Helvetica;
  font-size: 16px;
  color: white;
  line-height: 1.2;
}

.radio-radio
{
     -webkit-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #f1f1f1;
     color: rgb(92, 91, 91);
     top: 10px;
     height: 25px;
     width: 25px;
     border: 0;
     border-radius: 40px;
     cursor: pointer;     
     margin-right: 7px;
     outline: none;
}
.radio-radio:checked::before
{
     position: absolute;
     font: 13px/1 'Open Sans', sans-serif;
     left: 8px;
     top: 5px;
     content: '\02143';
     transform: rotate(40deg);
}

.checkbox
{
     border-radius: 5px;
     display: inline-block;
     margin-right: 7px;
     height: 10px;
     width: 10px;
}

.select-occ {
  display: block;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 700;
    color: rgb(53, 51, 51);
    line-height: 1.5;
    padding: 7px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

#circle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35vw;
    height: 35vh;
    position:relative;
}

.circle {
  width: 30vh;
    height: 30vh;
    position: absolute;
    border-radius: 50%;
}

#firstLayer {
    font-size: 23px;
    font-family: "Oswald", sans-serif;
    letter-spacing: 1.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    transition: 1s;
}

#secondLayer {
    background-color: #CCCCFF   ;
    transition: 1s;
    opacity: 0.5;
}

#thirdLayer {
    background-color: black;
    transition: 1s;
    opacity: 0.5;
}

#fourthLayer {
    background-color: cornflowerblue;
    transition: 1s;
    opacity: 0.5;
}
#fifthLayer {
    background-color: #FFFF99;
    transition: 1s;
    opacity: 0.5;
}

#circle-effect {
    position:relative;
    width: 30vh;
    height: 30vh;
    border-radius: 50%;
    overflow: hidden;
}

#circle-effect:hover #secondLayer {
    transform: translate(0px, 75px);
}
#circle-effect:hover #thirdLayer {
    transform: translate(0px, -75px);
}
#circle-effect:hover #fourthLayer {
    transform: translate(75px, 0px);
}
#circle-effect:hover #fifthLayer {
    transform: translate(-75px, 0px);
}
Improve this question
2
  • Please see how to create a Minimal Reproducible Example (minimize your code for us). Commented Nov 11, 2019 at 21:06
  • 1
    .style.color("red"); seems incorrect. I don't think .color is a method you can call like that. It should probably be .style.color = "red"; Commented Nov 11, 2019 at 21:12

2 Answers 2

Reset to default
1

You can't use style.color that way. You're trying to change the color of an item in an array instead of the item itself. Also that's not the way to change the background color. I added a class called required to the required elements. And then I got those items and used them in the for-loop. This probably isn't the best way to achieve your answer but you would want something like this. I added the functionality to determine which error field needs to be populated within the alert error. And if you do populate the error, the red background goes away upon the next time you submit the form. Hopefully this helps you get on the right track.

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

textarea.user-input {
  min-height: 115px;
  padding-top: 14px;
  padding-bottom: 13px;
}

.div-submit-button {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 8px;
}

.submit-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: 160px;
  width: 100%;
  height: 50px;
  background-color: #3b88bb;
  border-radius: 25px;
  font-family: Helvetica;
  font-size: 16px;
  color: white;
  line-height: 1.2;
}

.radio-radio
{
     -webkit-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #f1f1f1;
     color: rgb(92, 91, 91);
     top: 10px;
     height: 25px;
     width: 25px;
     border: 0;
     border-radius: 40px;
     cursor: pointer;     
     margin-right: 7px;
     outline: none;
}
.radio-radio:checked::before
{
     position: absolute;
     font: 13px/1 'Open Sans', sans-serif;
     left: 8px;
     top: 5px;
     content: '\02143';
     transform: rotate(40deg);
}

.checkbox
{
     border-radius: 5px;
     display: inline-block;
     margin-right: 7px;
     height: 10px;
     width: 10px;
}

.select-occ {
  display: block;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 700;
    color: rgb(53, 51, 51);
    line-height: 1.5;
    padding: 7px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

#circle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35vw;
    height: 35vh;
    position:relative;
}

.circle {
  width: 30vh;
    height: 30vh;
    position: absolute;
    border-radius: 50%;
}

#firstLayer {
    font-size: 23px;
    font-family: "Oswald", sans-serif;
    letter-spacing: 1.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    transition: 1s;
}

#secondLayer {
    background-color: #CCCCFF   ;
    transition: 1s;
    opacity: 0.5;
}

#thirdLayer {
    background-color: black;
    transition: 1s;
    opacity: 0.5;
}

#fourthLayer {
    background-color: cornflowerblue;
    transition: 1s;
    opacity: 0.5;
}
#fifthLayer {
    background-color: #FFFF99;
    transition: 1s;
    opacity: 0.5;
}

#circle-effect {
    position:relative;
    width: 30vh;
    height: 30vh;
    border-radius: 50%;
    overflow: hidden;
}

#circle-effect:hover #secondLayer {
    transform: translate(0px, 75px);
}
#circle-effect:hover #thirdLayer {
    transform: translate(0px, -75px);
}
#circle-effect:hover #fourthLayer {
    transform: translate(75px, 0px);
}
#circle-effect:hover #fifthLayer {
    transform: translate(-75px, 0px);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact Us</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/contact_form.css">
    <script type='text/javascript'>
        function validateForm() {
            var fname = document.forms["_contact_form"]["fname"].value;
            var lname = document.forms["_contact_form"]["lname"].value;
            var email = document.forms["_contact_form"]["email"].value;
            var input_message = document.forms["_contact_form"]["input_message"].value;
   
	var fields = document.getElementsByClassName("required");
            for (i=0;i<fields.length;i++){

                if (fields[i].value === ""){
                 alert("Please Enter a " + fields[i].name );
                    fields[i].style.backgroundColor = "red";
                    }
                    else{
                    fields[i].style.backgroundColor = "";
                    
                    }
            }
             return false;
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="form-wrap">
            <div class="contact-title">
                <div id="circle-container">
                        <div id="circle-effect">
                        <div class="circle" id="fifthLayer"></div>
                        <div class="circle" id="fourthLayer"></div>
                        <div class="circle" id="thirdLayer"></div>
                        <div class="circle" id="secondLayer"></div>
                        <div class="circle" id="firstLayer">Contact Me!</div>
                        </div>
                    </div>
            </div>

            <form name = "_contact_form" class="contact-form" onsubmit="return validateForm()" action="contactform.php" method="POST">
                <div class="div-input-form">
                    <label class="input-label">First Name: </label>
                    <input id="fname" class="user-input required" type="text" name="firstName" placeholder="First Name">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Last Name: </label>
                    <input id = "lname" class="user-input required" type="text" name="lastName" placeholder="Last Name">

                </div>

                <div class="div-input-form">
                    <label class="input-label">Email: *</label>
                    <input id = "email" class="user-input required" type="text" name="email" placeholder="Enter email addess">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Phone:</label>
                    <input class="user-input" type="text" name="phone" placeholder="Enter phone number">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Gender:</label>
                    <input type="radio" class="radio-radio" name = "gender" value="Male"> Male </br>
                    <input type="radio" class="radio-radio" name = "gender" value="Female"> Female </br>
                    <input type="radio" class="radio-radio" name = "gender" value="Other"> Other </br> </br>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Occupation:</label>
                    <select name = "dropdown" class="select-occ">
                        <option value="Student">Student</option>
                        <option value="Teacher">Teacher</option>
                    </select>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Age:</label>
                    <input type="radio" class="radio-radio" name = "age" value="18orBelow"> 15 or Below </br>
                    <input type="radio" class="radio-radio" name = "age" value="19to21"> 16 to 20 </br>
                    <input type="radio" class="radio-radio" name = "age" value="21orAbove"> 21 or above </br> </br>
                </div>

                <div class="div-input-form">
                </br>
                    <label class="input-label">How Did You Hear About Us:</label>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Internet Search<br>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Friends or Family<br>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Other<br> </br>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Message: *</label>
                    <textarea id="input_message" class="user-input required" name="message" placeholder="Your Comment..."></textarea>
                </div>

                <div class="div-submit-button" >
                    <button id ='submit' name = 'submit-button' class="submit-button">Submit</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0 
function validateForm() {

    var fields = [{name:'fname', value:''}, {name:'lname', value:''}, {name:'email', value:''}, {name:'input_message', value:''}];

    fields[0].value = document.forms["_contact_form"]["lname"].value;
    fields[1].value = document.forms["_contact_form"]["email"].value;
    fields[2].value = document.forms["_contact_form"]["input_message"].value;

    for (i=0;i<fields.length;i++){
        if (fields[i].value.length == 0) {
            alert("Please Fill The Required Fields");
            document.getElementById(fields[i].name).style.color("red");
            return false;
        }
    }
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.