javascript is not being called when i try to submit a form

Viewed 18

// Staff name validation:
function staffValidation () {
    var valid = true;
    var staff_name = document.getElementById("staff_name").value;
    var validname = /^[a-zA-Z\s]*$/;
    error1 = document.getElementById("errorMsg1").innerHTML ="*";

    if (staff_name == "" ) {
        document.getElementById("errorMsg1").innerHTML = "*STaff name is required";
        valid = false;
    }

    else if (full_name.match(validname)) {
      valid= true;
    }
    else {
      document.getElementById("errorMsg1").innerHTML = "* Only letters and white spaces allowed";
      valid= false;
    }

  return valid;
}



//email validation:
function emailValidation () {
    var valid = true;
    
    var validEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var email = document.getElementById("email1").value;
    error2 = document.getElementById("errorMsg2").innerHTML ="*";

     if (email == "" ) {
        document.getElementById("errorMsg2").innerHTML = "*Email is required";
        valid = false;
    }

    else if (email.match(validEmail)) {
        valid = true;
    }
     else {
    document.getElementById("errorMsg2").innerHTML = "*Please enter a valid email.";
    valid =false ;
  }

    return valid;

}


// Subject validation:
function subjectValidation () {
    var valid = true;
    var subject = document.getElementById("subject1").value;
    var validname = /^[a-zA-Z\s]*$/;
    error3 = document.getElementById("errorMsg3").innerHTML ="*";

    if (staff_name == "" ) {
        document.getElementById("errorMsg3").innerHTML = "*Subject is required";
        valid = false;
    }

    else if (subject.match(validname)) {
      valid= true;
    }
    else {
      document.getElementById("errorMsg3").innerHTML = "* Only letters and white spaces allowed";
      valid= false;
    }

  return valid;
}


// Problem type validation:
function problemValidation () {
    var valid = true;
    var prob = document.getElementsByName("problem_type")[0].value;
    error4 = document.getElementById("errorMsg4").innerHTML ="*";

    if (prob == "") {
        document.getElementById("errorMsg4").innerHTML = "*Please select a problem type.";
            valid = false;
    }

    else {
        valid = true;
    }


  return valid;
}


// Description validation:
function descriptionValidation () {
    var valid = true;
    var description = document.getElementById("description1").value;

    error5 = document.getElementById("errorMsg5").innerHTML ="*";

    if (description == "" ) {
        document.getElementById("errorMsg5").innerHTML = "*Description is required";
        valid = false;
    }

    else if (description.length < 100) {
        document.getElementById("errorMsg5").innerHTML = "*Please be more specific, type 100 characters minimum.";
        valid = false;
    }

  return valid;
}



// function for form submission:
function formSubmit () {
  if ( staffValidation() == false || emailValidation() == false ||  subjectValidation() == false  || problemValidation() == false || descriptionValidation() == false ) {
    document.getElementById("errorMsg").innerHTML = "* Please complete the required fields correctly";
    return false;
  }
  else {
 
    return true;
  }

 
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="log-it-reports2.css">
    <script src="log-it-reports.js"></script>
    <title>WearView Academy Homepage</title>
</head>

<body>

    <div class= "content">
        
       <div class="inner-body">
          
       <div class="form1">
        <form  method="GET" onsubmit=" return formSubmit() " action="#">
          <div class="error1" id= "errorMsg"></div>
          <div class="error" id= "errorMsg1"></div>
          <div>
          <label for="staff_name"><b>Staff Name:</b></label> 
          <input  class="field" name="staff_name" onclick=" return staffValidation()" onchange=" return staffValidation()" id="subject" type="text" placeholder="Staff Name"  > 
          </div><br>

          <div class="error" id= "errorMsg2"></div>
          <div>
          <label for="email"><b>Email:</b></label> 
          <input class="field" id="email1" name="email" onclick=" return emailValidation()" onchange=" return emailValidation()" type="email" placeholder="staff@wearview.com">  
          </div><br>
          <div class="error" id= "errorMsg3"></div>
          <div>
          <label for="subject"><b>Subject:</b></label> 
          <input  class="field" name="subject" id="subject" onclick=" return subjectValidation()" onchange=" return subjectValidation()" type="text" placeholder="Subject Title"  > 
          </div><br>

          <div class="error" id= "errorMsg4"></div>
          <div>
            <select onclick=" return problemValidation()" onchange=" return problemValidation()" class="field4" name="problem_type" id="problemtypes">
                <option value="">Problem Type</option>
                <option value="Hardware">Hardware</option>
                <option value="Software">Software</option>
                <option value="Software&Hardware">Software & Hardware</option>
                <option value="Other">Other</option>
              </select>
          </div><br>
          <div class="error" id= "errorMsg5"></div>
          <div>
          <textarea class="field2" id="description1" name="description" onclick=" return descriptionValidation()" onchange=" return descriptionValidation()" placeholder="Description goes here" name="descript" rows="15" cols="90"></textarea>
          </div>          
          
          <div>
            <button class="field3" type="submit" class="btn">Submit</button>
            <input type="checkbox" id="notify" name="notify" value="">
            <label for="notify">Inform me by email when issue is resolved.</label> 
        </div>
        </form>
       </div>
       
       </div>
    </div>
       
    </div>
</body>
</html>

Im trying to validate a form using javascript code, however the form action automatically takes place without any validation happening. i would like to know why my javascript code is not being called which i sourced in the head tag with the name "log-it-issues.js", could it be a syntax error ? i tried to scan my code for such an error , but no result, thank you for taking time to look at my code.

1 Answers

The input stuff id isn't set Give that input an id and the form will work correctly : staff_name

<input  class="field" name="staff_name" id="staff_name" onclick=" return staffValidation()" onchange=" return staffValidation()" id="subject" type="text" placeholder="Staff Name"> 
Related