CODEWITHSUNDEEP
javascripthtml
user5109957
user5109957

Reputation:

JavaScript for Form Validation

I am trying to make a form that checks for these requirements:

  1. Makes sure "Full Name" and "Student ID" fields are not empty
  2. Makes sure the "Email Address" field contains "@ufv.ca".

HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8" />    
        <meta name="description" content="Javascript Quiz"/>
         <meta name="author" content="M.Bouguerra"/>
        <meta name="keywords" content="Javascript, client side scripting"/>
        <meta name="robots" content="index,folow,noarchive"/>

        <link rel="icon" href="images/mylogo.ico"/>

        <script type="text/javascript" src="scripts/script.js"> </script>
        <title>Javascript</title>

</head>
<body onload="focus()">
<header>
    <img id="logo" src="./images/javascript.jpg" alt="Javascript Logo" title="Javascript Logo" height="200">
<hgroup >
    <h1>Javascript Overview</h1>
<h2>Multiple Choice Quiz</h2>   
</hgroup>

</header>
<nav>
    <ul  id="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="register.html">Register</a></li>
        <li><a href="quiz.html">Start Quiz</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>

</nav>
    <br>
<section >
<article>
<form  action="quiz.html" id="register" method="get" >
      <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li class="input">
                <label >Full Name</label>
                <input type="text" id="fullName" name="fullName" />
             </li>
             <li class="input">
                <label >Student ID</label>
                <input type="text" id="studentId" name="studentId" />
             </li>
            <li class="input">
                <label >Email address</label>
                <input type="text" id="email" name="email"  />
             </li>
          </ol>  
        <input type="submit" value="Start Quiz" onclick="validateRegistration()" />
    </fieldset>
</form>
    <br>

</article>
</section>
    <br>
    <br>
<footer>
&copy; 2016 M. Bouguerra
</footer>
</body>
</html>

JavaScript:

//Function to make "Full name" form element highlighted
function focus(){
    document.forms.register.fullName.focus();
}


//Requirements for Form Values
function validateRegistration(){
    if(document.forms.register.fullName.value==""){
        alert("You must enter your full name");
        return false; //WHY WE NEED THIS?
    }
    else if(document.forms.register.studentID.value==""){
    alert("You must provide student ID");
    return false;
    }
    else if(!document.forms.register.email.value.match(/[email protected]$/)){
        alert("You must provide a valid ufv email");
        return false;
    }
    return true; //what's this for?
}

When the Full Name field is empty and I click "Start Quiz" to submit the form the alert pops up to tell the user to input their full name, but still goes to the quiz page, which I don't want to happen if the form requirements aren't met.

It also seems like the statements for validating the Student ID and Email fields are not working at all.

Upvotes: 0

Views: 1628

Answers (1)

Siva
Siva

Reputation: 2795

  1. call validation onSubmit of the form
  2. The field name is wrong document.forms.register.studentID.value should be document.forms.register.studentId.value
  3. Store the error messages and display in single alert instead of checking first field and return from validation. which will fail to validate other fields.

//Function to make "Full name" form element highlighted
function focus(){
    document.forms.register.fullName.focus();
}


//Requirements for Form Values
function validateRegistration(){
  var str = [];
    if(document.forms.register.fullName.value==""){
        str.push("You must enter your full name");
    }
    if(document.forms.register.studentId.value==""){
    str.push("You must provide student ID");
    }
    if(!document.forms.register.email.value.match(/[email protected]$/)){
        str.push("You must provide a valid ufv email");
    }
  if(str.length > 0) {
    alert(str.join('\n'));
    return false;
    } else { return true; }
}
<form  action="quiz.html" id="register" method="get" onSubmit="return validateRegistration()" >
      <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li class="input">
                <label >Full Name</label>
                <input type="text" id="fullName" name="fullName" />
             </li>
             <li class="input">
                <label >Student ID</label>
                <input type="text" id="studentId" name="studentId" />
             </li>
            <li class="input">
                <label >Email address</label>
                <input type="text" id="email" name="email"  />
             </li>
          </ol>  
        <input type="submit" value="Start Quiz" />
    </fieldset>
</form>

Upvotes: 1

Related Questions