Question

I am trying to perform form input validation through JavaScript. I have the script file stored externally in localhost/teststite/js folder as formvalidation.js. For some reason, the script file doesn't seem to be called and no validation is performed even when I enter input in the incorrect format. Can anybody point out what the issue is?

(Also have a CSS file stored in localhost/testsite/css path.)

Here's the HTML code:

     <!DOCTYPE html>
     <html lang = "en-US">
     <head>
     <title> Sign-up Page </title>
     <meta charset = "utf-8">
     <link href = "css/formstyles.css" rel = "stylesheet">
     <script src = "js/formvalidation.js"></script>
     </head>
     <body>
     <h2> Please enter your information here </h2>
     <form onsubmit = "return formValidation();">
     <fieldset>
     <legend> Sign-up Information </legend>
     <p>
     <label> Firstname: </label>
     <input type = "text" placeholder = "Enter firstname" name = "firstname" id = "firstname" required />
      </p>
      <p>
        <label> Lastname: </label>
        <input type = "text" placeholder = "Enter lastname" name = "lastname" id = "lastname" required />
      </p>
      <p>
        <label> Phone Number: </label>
        <input type = "text" placeholder = "(888) 888-8888" name = "phone" id = "phone" required />
      </p>
      <p>
        <label> Email ID: </label>
        <input type = "text" placeholder = "xxxxxxx@xxxxx.xxx" name = "email" id = "email" required />
      </p>
      <p id = "errorDisplay">
      <!-- Error messages are displayed here -->
      </p>
      <p>
        <button type = "submit"> Submit </button>
      </p>
</fieldset>
</form>
</body>
</html>

And the JavaScript:

 function formValidation()
 {
    var firstname = document.getElementById("firstname").value;
    var lastname = document.getElementById("lastname").value;
    var email = document.getElementById("email").value;
    var phone = document.getElementById("phone").value;
    var errors = "";
    var errorOutput = document.getElementById("errorDisplay");
    var nameRE = /^[a-zA-Z]+{2,40}$/;
    var phoneRE = /^\(\d{3}\) *\d{3}-\d{4}$/;
    var emailRE = /^.+@.+\..{2,4}$/;

   if(!nameRE.test(firstname))
   {
       errors += "Error! Invalid format. Names must contain only
       alphabets between 2 and 40 characters; 
   }
   if(!nameRE.test(lastname))
   {
       errors += "Error! Invalid format. Names must contain only
       alphabets between 2 and 40 characters";

   }
   if(!phoneRE.test(phone))
   {
       errors += "Error! Invalid format. Ex: (201) 555-1234";
   }
   if(!emailRE.test(email))
   {
       errors += "Error! Invalid format. Ex: johndoe@gmail.com";
   }
   if(errors != "")
   {
       errorOutput.innerHTML = errors;
       return false;
   }
   return true;
 }

Answer 1

function formValidation()
 {
    var firstname = document.getElementById("firstname").value;
    var lastname = document.getElementById("lastname").value;
    var email = document.getElementById("email").value;
    var phone = document.getElementById("phone").value;
    var errors = "";
    var errorOutput = document.getElementById("errorDisplay");
    var nameRE = /^[a-zA-Z]{2,40}$/;
    var phoneRE = /^\(\d{3}\) *\d{3}-\d{4}$/;
    var emailRE = /^.+@.+\..{2,4}$/;

   if(!nameRE.test(firstname))
   {
       errors += "Error! Invalid format. Names must contain only alphabets between 2 and 40 characters"; 
   }
   if(!nameRE.test(lastname))
   {
       errors += "Error! Invalid format. Names must contain only alphabets between 2 and 40 characters";

   }
   if(!phoneRE.test(phone))
   {
       errors += "Error! Invalid format. Ex: (201) 555-1234";
   }
   if(!emailRE.test(email))
   {
       errors += "Error! Invalid format. Ex: johndoe@gmail.com";
   }
   if(errors != "")
   {
       errorOutput.innerHTML = errors;
       return false;
   }
   return true;
 }

<!DOCTYPE html>
     <html lang = "en-US">
     <head>
     <title> Sign-up Page </title>
     <meta charset = "utf-8">
     </head>
     <body>
     <h2> Please enter your information here </h1>
     <form onsubmit = "return formValidation();">
     <fieldset>
     <legend> Sign-up Information </legend>
     <p>
     <label> Firstname: </label>
     <input type = "text" placeholder = "Enter firstname" name = "firstname" id = "firstname" required />
      </p>
      <p>
        <label> Lastname: </label>
        <input type = "text" placeholder = "Enter lastname" name = "lastname" id = "lastname" required />
      </p>
      <p>
        <label> Phone Number: </label>
        <input type = "text" placeholder = "(888) 888-8888" name = "phone" id = "phone" required />
      </p>
      <p>
        <label> Email ID: </label>
        <input type = "text" placeholder = "xxxxxxx@xxxxx.xxx" name = "email" id = "email" required />
      </p>
      <p id = "errorDisplay">Error Msg : 
      <!-- Error messages are displayed here -->
      </p>
      <p>
        <button type = "submit"> Submit </button>
      </p>
</fieldset>
</form>

</body>
</html>

The problem was with the regular expression you defined.

var nameRE = /^[a-zA-Z]+{2,40}$/;

it should be

var nameRE = /^[a-zA-Z]{2,40}$/;

I have modified the change and added the code in the answer.

javascript - Validation using JavaScript is not being performed

1 个答案: