email Border style won't work for form validation in javascript?

Question

I'm making a form validation in javascript, Everything works fine but the border style won't work for the email validation, The image validation works flawlessly but the only problem I'm having is the email part. This is my code:

function validate()
{
   var email = document.getElementById('name').value;
   var img = document.getElementById("image");
   var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;

    if (!pattern.test(email)) {
         var myDiv = document.getElementById("error");
         email.style.border = "solid 3px red";
         myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">Please Enter an valid Email</font>';
         return false;

    }   else if (img.value.trim()=="") {
         var myDiv = document.getElementById("error");
         img.style.border = "solid 3px red";
         myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">Please Select an image</font>';
         return false;

    }



}

EDIT: This is also my HTML code that I did.

<div class="container">
        <div class="add-form">
            <form method="post" enctype="multipart/form-data" id="FormID">
            <div class="well well-sm"><strong>Username</strong></div>
                <label for = "name" id = "LabelName"><font size = "5">

                <img alt = "Fix audits" src = "https://image.flaticon.com/icons/png/512/1233/1233986.png" width = "50">
                 <br>
                 </label>
                <input class = "UsernameUpload form-control" id = "name" type="text" name="user_name"></font>
                <div id = "space"><br></div>
                <div class="well well-sm"><strong>Image</strong></div>

                <label for = "image" id = "fileLabel"
                ondragover = "overrideDefault(event);fileHover();"
                ondragenter = "overrideDefault(event);fileHover();"
                ondragleave = "overrideDefault(event);fileHoverEnd();"
                ondrop = "overrideDefault(event);fileHoverEnd();addFiles(event);">


                <font face = "fantasy" size = "5">
                <img alt = "Fix audits" src = "https://image.flaticon.com/icons/png/512/1180/premium/1180674.png" width = "50">
                <br>

                 <span id = "fileLabelText">Select image to upload</font></span>
                 <br>
                 </label>
                 <div class = "upload-area" id = "uploadfile"><h1>Drag and Drop File Here</h1></div>

                <input multiple onchange = "addFiles(event)" id = "image" type="file"  onchange ="unlock()" name="profile" class="form-control2" accept="*/image">
                <button class = "btn btn-info uploadButton" type="submit" value = "submit" name="btn-add" onClick = "return validate()" action = "index.php"><font face = "calibri" size = "4">upload</font></button>
                <div id = "error"><font face = "fantasy">Please fill up the username and select an image</font></div>
                <progress id = "progressBar" value = "0" max = "100" style = "width:300px;"></progress> 
                <h3 id = "status"></h3>
                <p id = "loaded_n_total"></p>

            </form>
        </div>
        <hr style="border-bottom: 5px blue solid;">
    </div> 
    </div>

Answer 1

Firstly there is:

var email = document.getElementById('name').value;

Your error is here:

email.style.border = ...

email is a string, not an element, it doesn't have a style property so an error is thrown when attempting to access the border property of undefined.

A console error message should have alerted you to that.

Answer 2

The button[type="submit"] is used within the form tag, which will submit form values and reload the page. Use e.preventDefault , to prevent it's default action.

var email = document.getElementById('name').value; -> the email variable have value, so the statement email.style.border = "solid 3px red"; will throw error, as it is not an element.

 function validate(e) { e.preventDefault(); var email = document.getElementById('name'); var img = document.getElementById("image"); var pattern = /^[a-zA-Z0-9\\-_]+(\\.[a-zA-Z0-9\\-_]+)*@[a-z0-9]+(\\-[a-z0-9]+)*(\\.[a-z0-9]+(\\-[a-z0-9]+)*)*\\.[az]{2,4}$/; if (!pattern.test(email.value)) { var myDiv = document.getElementById("error"); email.style.border = "solid 3px red"; myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">Please Enter an valid Email</font>'; return false; } else if (img.value.trim() == "") { var myDiv = document.getElementById("error"); img.style.border = "solid 3px red"; myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">Please Select an image</font>'; return false; } }

 <div class="container"> <div class="add-form"> <form method="post" enctype="multipart/form-data" id="FormID"> <div class="well well-sm"><strong>Username</strong></div> <label for="name" id="LabelName"><font size = "5"> <img alt = "Fix audits" src = "https://image.flaticon.com/icons/png/512/1233/1233986.png" width = "50"> <br> </label> <input class="UsernameUpload form-control" id="name" type="text" name="user_name" value="" /> <div id="space"><br></div> <div class="well well-sm"><strong>Image</strong></div> <label for="image" id="fileLabel" ondragover="overrideDefault(event);fileHover();" ondragenter="overrideDefault(event);fileHover();" ondragleave="overrideDefault(event);fileHoverEnd();" ondrop="overrideDefault(event);fileHoverEnd();addFiles(event);"> <font face = "fantasy" size = "5"> <img alt = "Fix audits" src = "https://image.flaticon.com/icons/png/512/1180/premium/1180674.png" width = "50"> <br> <span id = "fileLabelText">Select image to upload</font></span> <br> </label> <div class="upload-area" id="uploadfile"> <h1>Drag and Drop File Here</h1> </div> <input multiple onchange="addFiles(event)" id="image" type="file" onchange="unlock()" name="profile" class="form-control2" accept="*/image"> <button class="btn btn-info uploadButton" type="submit" value="submit" name="btn-add" onClick="return validate(event)" action="index.php"><font face = "calibri" size = "4">upload</font></button> <div id="error"> <font face="fantasy">Please fill up the username and select an image</font> </div> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> </div> <hr style="border-bottom: 5px blue solid;"> </div> </div>

Note - id with name as value is not an appropriate name as pointed out by @RobG . If the field holds email value , the id="email" would be more appropriate.