Javascript validation form not working with HTML

Question

I am required to complete an assignment that shows basic Javascript form processing. The objective is to have a "details.html" page which checks that all input fields are valid (eg Names are all text). I have tried to complete both documents but they just don't seem to be linking correctly:

Nothing is triggering the "validateForm()" function, and any input just passes through on submission, what have I done wrong?

 function validateForm() { var firstname = document.getElementById("fName").value; var lastname = document.getElementById("lName").value; var email = document.getElementById("email").value; var address = document.getElementById("address").value; var postCode = document.getElementById("pCode").value; var accepted = document.getElementById("accept").checked; var allLetters = /^[a-zA-z]+$/i; var allNumbers = /^[0-9]+$/; 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 validAddress = new RegExp(allNumbers.source + "|" + allLetters.source); if (address.match(validAddress) && firstname.match(allLetters) && lastname.match(allLetters) && email.match(validEmail) && address != "" && postCode.match(allNumbers) && accepted) { return true; } else { window.alert("Error! Invalid input in form. Please try again."); return false; } }

 .header { background-color: tomato; color: white; padding: 2px; } .focusPage { width: 70%; margin-left: auto; margin-right: auto; background-color: lightgrey; min-height: 600px; height: 600px; height: auto !important; } .userDetails { width: 90%; margin-left: auto; margin-right: auto; background-color: white; border: 2px solid black; font-size: 20px; font-family: Arial, Helvetica, sans-serif; padding-top: 20px; padding-bottom: 20px; } .inputs { float: right; direction: ltr; margin-right: 5px; } .acceptTerms { font-size: 15px; font-family: "Times New Roman", Times, serif; } p { font-size: 20px; font-family: Verdana, Geneva, Tahoma, sans-serif; } .thePage { background-color: black; }

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="someName" content="someContent"> <title> Home </title> <script type="text/javascript" src="myScripts.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body class="thePage"> <div> <div class="focusPage"> <div class="header"> <h1>Welcome user!</h1> </div> <p>This form will allow you to enter your personal details for storage in our database.</p> <p>Be sure to read our <a href="agreement.html">User Agreement</a> before submitting your details</p> <ul class="userDetails"> <form class="userForm" onsubmit="validateForm()" method="post"> <li><label for="inputNames" required>First Name - </label> <label for="inputs"><input type="text" class="inputs" id="fname" name="fname"></label></li> <li><label for="inputNames">Last Name - </label> <label for="inputs" required><input type="text" class="inputs" id="lname" name="lname"></li> <li><label for="inputNames">Email - </label> <label for="inputs" required><input type="email" class="inputs" id="email" name="email"></li> <li><label for="inputNames">Address number - </label> <label for="inputs" required><input type="text" class="inputs" id="address" name="address"></li> <li><label for="inputNames">Post code - </label> <label for="inputs" required><input type="text" class="inputs" id="pCode" name="pCode"></li> <li><label for="inputNames">Additional Detail - </label></li> <textarea rows="5" cols="50" class="textfield" placeholder="Add detail here..."></textarea> <div class="agreement"> <input type="checkbox"> <label class="acceptTerms" id="accept">I Accept the User Agreement</label> </div> <input type="submit" value="Submit"> </form> </ul> </div> </div> </body> </html>

Answer 1

JS: you have mentioned wrong IDs, remember they are case sensitive .

var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;

HTML: You have mentioned required in label tag which won't work, add it to input tag.

   <form class="userForm" onsubmit="validateForm()">
        <li><label for="inputNames" >First Name - </label>
        <label for="inputs"><input type="text" class="inputs" id="fname" name="fname" required></label></li>

        <li><label for="inputNames">Last Name - </label>
        <label for="inputs" ><input type="text" class="inputs" id="lname" name="lname" required></li>

        <li><label for="inputNames">Email - </label>
        <label for="inputs" ><input type="email" class="inputs" id="email" name="email" required></li>

        <li><label for="inputNames">Address number - </label>
        <label for="inputs" ><input type="text" class="inputs" id="address" name="address" required></li>

        <li><label for="inputNames">Post code - </label>
        <label for="inputs" ><input type="text" class="inputs" id="pCode" name="pCode" required></li>

        <li><label for="inputNames">Additional Detail - </label></li>
        <textarea rows="5" cols="50"  class="textfield" placeholder="Add detail here..."></textarea>

        <div class="agreement">
        <input type="checkbox" required> <label class="acceptTerms" id="accept">I Accept the User Agreement</label>
        </div>
        <input type="submit" value="Submit">
    </form>

Javascript validation form not working with HTML

Question

1 answers

solution1
1 2018-08-12 08:23:52

Javascript validation form not working with HTML

Question

1 answers

solution1 1 2018-08-12 08:23:52

solution1
1 2018-08-12 08:23:52