CODEWITHSUNDEEP
javascripthtmldom
Deepak
Deepak

Reputation: 31

Why does this not change the color of the border

I'm working on a form validator and I want it to change the color of the border around each div when the input field is null.

It only works when I specify the style for the firs div "fname". But when I change it to div in the style section, so that the default style applies to all elements, the form for some reason sends the data even though the input fields are null. How do I prevent the form from submission and make the red border appear around each div? Thanks!

<!DOCTYPE html>
 <html lang="en">

<head>
     <meta charset="UTF-8">
     <title>Form Validation</title>
     <meta name="description" content="DESCRIPTION">
     <link rel="stylesheet" href="PATH">
     <style>
        div {
            border:thick solid white;
        }
     </style>
     <script>
     function validateForm() {
         var fname = document.forms["myForm"]["fname"].value;
         var email = document.forms["myForm"]["email"].value;
         var message = document.forms["myForm"]["message"].value;
         var discussWhat = document.forms["myForm"]["discussWhat"].value;
         var pickOne = document.forms["myForm"]["pickOne"].value;
         var selectSome = document.forms["myForm"]["selectSome"].value;
         if (fname == null || fname == "") {
             alert("Name must be filled out");
             document.getElementById("fname").style.borderColor = "red";
             return false;
         } else if (email == null || email == "") {
             alert("Email must be filled out");
             document.getElementById("email").style.borderColor = "red";
             return false;
         } else if (message == null || message == "") {
             alert("Message must be filled out");
             document.getElementById("message").style.borderColor = "red";
             return false;
         } else if (discussWhat == null) {
             alert("Selec what you want to discuss");
             document.getElementById("discussWhat").style.borderColor = "red";
             return false;
         } else if (pickOne == null) {
             alert("Pick one option");
             document.getElementById("pickOne").style.borderColor = "red";
             return false;
         } else if (selectSome == null) {
             alert("Select some options");
             document.getElementById("selectSome").style.borderColor = "red";          
             return false;
         }
     }
     </script>
     <!--[if lt IE 9]>
       <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 </head>
 <body>

     <form method="post" name="myForm" action="mailer.php" onsubmit="return validateForm()">
         <fieldset>
            <div id="v">
                 <label>Name: </label>
                 <input type="text" name="fname"><br>
            </div>
            <div id="email">
                 <label>E-mail: </label>
                 <input type="text" name="email" ><br>
            </div>
            <div id="message">
                 <label>Message: </label>
                 <textarea name="message" ></textarea><br>
            </div>
            <div id="discussWhat">
                 <label>What would you like to discuss? </label><br>
                 <select name="discussWhat" >
                     <option>Technical Support</option>
                     <option>Billing</option>
                     <option>Sales</option>
                     <option>Other</option>
                </select><br>
            </div>
            <div id="pickOne">
                 <label>Pick one: </label><br>
                 <input type="radio" name="pickOne" value="option1">Option 1
                 <input type="radio" name="pickOne" value="option2">Option 2<br>
            </div>
            <div id="selectSome">
                 <label>Select all that apply: </label>
                 <input type = "checkbox" name="selectSome" value="FirstCheckbox"><label>First Checkbox</label>
                 <input type = "checkbox" name="selectSome" value="SecondCheckbox"><label>Second Checkbox</label>
                 <input type = "checkbox" name="selectSome" value="ThirdCheckbox"><label>Third Checkbox</label>4
            </div>
        </fieldset>
        <input type="submit" value="Submit">
     </form>
 </body>

 </html>

Upvotes: 0

Views: 72

Answers (2)

Endless
Endless

Reputation: 37815

With only css you can get a long way, also recommend changing email type from text to email

you could also let the browser fall through and take care of the validation/styling for you, as long as you set the requirement needed on the attributes

:required:invalid {
  border-color: #C00000;
  color: red;
}
:required:invalid ~ label {
  border-color: #C00000;
  color: red;
}
<form method="post" name="myForm" action="mailer.php" onsubmit="return validateForm()">
  <fieldset>
    <div id="v">
      <label>Name:</label>
      <input type="text" name="fname" required>
      <br>
    </div>
    <div id="email">
      <label>E-mail:</label>
      <input type="email" name="email" required>
      <br>
    </div>
    <div id="message">
      <label>Message:</label>
      <textarea name="message" required></textarea>
      <br>
    </div>
    <div id="discussWhat">
      <label>What would you like to discuss?</label>
      <br>
      <select name="discussWhat" required>
        <option disabled selected value>-- select an option --</option>
        <option>Technical Support</option>
        <option>Billing</option>
        <option>Sales</option>
        <option>Other</option>
      </select>
      <br>
    </div>
    <div id="pickOne">
      <label>Pick one:</label>
      <br>
      <input type="radio" name="pickOne" value="option1" required>
      <label>Option 1</label>
      <input type="radio" name="pickOne" value="option2" required>
      <label>Option 2</label>
      <br>
    </div>
    <div id="selectSome">
      <label>Select all that apply:</label>
      <input type="checkbox" name="selectSome" value="FirstCheckbox">
      <label>First Checkbox</label>
      <input type="checkbox" name="selectSome" value="SecondCheckbox">
      <label>Second Checkbox</label>
      <input type="checkbox" name="selectSome" value="ThirdCheckbox">
      <label>Third Checkbox</label>4
    </div>
  </fieldset>
  <input type="submit" value="Submit">
</form>

Upvotes: 0

Ekaterina1234
Ekaterina1234

Reputation: 410

The Id for fname input field is "v", but the function uses "fname" id, which does not exist in the form.

Upvotes: 1

Related Questions