ZuoTi.Pro
Question

NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate.

Purpose: You are going to learn basic form validation and event handling in JavaScript. Requirements: To complete this projec

Submit a button input type, or a submit input type if you can get this to work without actually submitting the form) When the

******************************************************************************

CODE:

<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

<head>

<title>Nice</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>

var textFromTextArea;

function getWords(){

var text = document.getElementById("bigTextArea").value;

var arr = text.split(" ");

document.getElementById("infoLabel").textContent = arr.length+" are the number of words";

if(arr.length==24){

textFromTextArea = document.getElementById("bigTextArea").value;

}

if(arr.length>25){

document.getElementById("bigTextArea").value = textFromTextArea;

alert("More than 25 chars not allowed")

}

}

function myFunction(){

document.getElementById("infoArea").textContent ="";

var userName = document.getElementById("userNameField");

var letters = /^[A-Za-z]+$/;

if(userName.value.match(letters)){

var div = document.getElementById("infoArea").textContent = "UserName is right;";

}else{

var div = document.getElementById("infoArea").textContent = "UserName can contain only letters;";

}

var password = document.getElementById("passwordField").value;

var pass =/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,20}$/;

if(password.match(pass)){

document.getElementById("infoArea").textContent=document.getElementById("infoArea").textContent+";Password is right";

}else{

document.getElementById("infoArea").textContent=document.getElementById("infoArea").textContent+";Check password";

}

var studentIdNumber = document.getElementById("studentIdField").textContent;

var onlyNumbers = /^[0-9]+$/;

if(!isNaN(studentIdNumber)){

document.getElementById("infoArea").textContent =document.getElementById("infoArea").textContent+"student id can only be numbers" ;

}else{

document.getElementById("infoArea").textContent = document.getElementById("infoArea").textContent+"Student id is right";

}

}

</script>

</head>

<body>

<div>

<form>

UserName:<br>

<input type="text" name="userName" value="" id="userNameField">

<br>

Password<br>

<input type="password" name="lastname" value="" id="passwordField" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{1,}">

<br>

Student Id<br>

<input type="text" name="studentId" value="22423" id="studentIdField"><br>

<textarea id="bigTextArea" oninput="getWords()"></textarea>

<br><label id="infoLabel"></label>

<input type="button" value="Submit" onclick="myFunction()">

</form>

</div><div id="infoArea"></div>

</body>

</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Here is the improved code that works as mentioned in the problem statement.

  • For the info part i have used blue color so that it can be described as information.
  • For the error part the background will be red.
  • When there will be an error then the whole background will get change into pink color.
<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

<head>

     <title>Nice</title>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <script>

          var textFromTextArea;

          function getWords() {

               var text = document.getElementById("bigTextArea").value;

               var arr = text.split(" ");

               document.getElementById("infoLabel").textContent = arr.length + " are the number of words";
               document.getElementById("infoLabel").className = "infoLevelDecor";
               if (arr.length == 24) {

                    textFromTextArea = document.getElementById("bigTextArea").value;

               }

               if (arr.length > 25) {

                    document.getElementById("bigTextArea").value = textFromTextArea;

                    alert("More than 25 words not allowed")

               }

          }

          function myFunction() {

               document.getElementById("infoArea").textContent = "";
               var errors = [];

               var userName = document.getElementById("userNameField");

               var letters = /^[A-Za-z]+$/;

               if (userName.value.match(letters)) {
                    document.getElementById("infoArea").textContent = "•UserName is right ";
               } else {
                    errors.push("•UserName can contain only letters\r\n");
               }

               var password = document.getElementById("passwordField").value;

               var pass = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{4,}$/;

               if (password.match(pass)) {
                    document.getElementById("infoArea").textContent = document.getElementById("infoArea").textContent + " \n•Password is right";
               } else {
                    errors.push("•Password should be minimum 4 char long and has one letter and number\r\n");
               }

               var studentIdNumber = document.getElementById("studentIdField").textContent;

               var onlyNumbers = /^[0-9]+$/;

               if (!isNaN(studentIdNumber)) {
                    errors.push("•Student id can only be numbers\r\n"); 
               } else {
                    document.getElementById("infoArea").textContent = document.getElementById("infoArea").textContent + "\n •Student id is right";
               }

               if(errors){

                    errors.forEach(element => {
                         document.getElementById("infoArea").textContent += element;
                         document.getElementById("infoArea").textContent += "\r\n";
                         //document.write("br");
                    });
                    //document.getElementById("infoArea").textContent = errors;
                    document.body.style.backgroundColor = "pink";
                    document.getElementById("infoArea").className = "infoAreaDecor"; 
               }else{
                    document.getElementById("infoArea").textContent = '';
                    document.body.style.backgroundColor = "white";
               }


          }

     </script>

     <style>
          .infoAreaDecor{
               padding: 20px;
               background-color: #f44336; /* Red */
               color: white;
               margin-bottom: 15px;
          }

          .infoLevelDecor{
               padding: 20px;
               background-color: #ADD8E6;
               margin-bottom: 10px;
          }
     </style>

</head>

<body>

     <div class="container">

          <form>

               UserName:<br>

               <input type="text" name="userName" value="" id="userNameField">

               <br>

               Password<br>

               <input type="password" name="lastname" value="" id="passwordField"
                    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{1,}">

               <br>

               Student Id<br>

               <input type="text" name="studentId" value="22423" id="studentIdField"><br>

               Comment<br>
               <textarea id="bigTextArea" oninput="getWords()"></textarea>

               <div id="infoLabel" ></div>

               <input type="button" value="Submit" onclick="myFunction()">

          </form>

     </div>
     <div id="infoArea" >
     </div>

</body>

</html>

Here is the output of the improved code.

UserName: Password Student Id 22423 Comment hello mister 2 are the number of words Submit •UserName can contain only letters

If it helped you please give a thumbs up. Means a lot.
Stay safe.

0 0
Add a comment
Know the answer?
Add Answer to:
NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but,...

    LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but, I keep getting an error that I coded "Wrong username and password!" ***PLEASE DONT GIVE ME A NEW CODE THAT IS NOWHERE NEAR THE CODE I SUBMITTED***** PLEASE LOOK AT THE CODE AND SEE ANY ISSUES login.html <!DOCTYPE html> <html> <head> <title>login popup</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> body { background-color: white; } </style> </head> <body> <center> <h1 style="text-align: center;"> Login </h1> <form>             Login ID:...

  • given below are the project description and their Html and css files i need javascript according to the project and other files!

    HTML------------------------------------------------------CSS---------------------------------------------------WEB230 - JavaScript 1 Assignment 7 - FormsSome of these tasks would be better done in HTML or CSS but do them in JavaScript to practice whatwe have learned.1. Select the form element and save it in a variable. From here we can access all of the form fields.2. When the page loads do the following:add the password value "monkey"select the favourite city "New York"clear the textarea3. Add an event handler to the "name" field to change the background color...

  • I need to complete 3 validation cases in this Javascript code. I need to validate email,...

    I need to complete 3 validation cases in this Javascript code. I need to validate email, phone and street address. How would I go about validating these 3 cases in this code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Week 10: Regular Expressions</title> <style type="text/css"> span { padding: 2px; } .success { color: #008000; background: #99cc99; } .failure { color: #ff0000; background: #ff9999; } </style> <script type="text/javascript"> function validateInput(form) { var result0 = document.getElementById('result0'), result1 = document.getElementById('result1'), result2 = document.getElementById('result2'),...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en">...

    How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2> <center> Average: </h2> <h3> <center> Rate the following: </h2> <h3> <center> Rating Criteria: <br> Developing (0-5), Competent (6-10), Accomplished (10-15); </h3> <center> Judge Name: <input type="text" id="judge"> <br> <br> <center> 1. Articulate requirements and design of the project: <input type="text" id="num1"> <br> <br> 2. Plan the solution and implement the project: <input type="text" id="num2"> <br> <br> 3....

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • JavaScript (Please debug this code) When a user enters a string in the input box, the...

    JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...

  • <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">      &n

    <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">         <!--div class-->       <div class="formvalidation">       <label>Your first Name</label>        <span id="showname"></span>        <!--label for firstname-->       <input type="text" name="firstname" class="formsignup"  id ="firstn" placeholder="Enter your Name">      <br><br>           <!--lastname-->       <label>Your last Name</label> <span id="showlname"></span>       <input type="text" name="lastname" class="formsignup" id="lastn" placeholder="Enter your last Name">       <br><br>        <!--email-->         <label>Your Email</label>          <span id="showemail"></span>         <input type="email" name="emailid" class="formsignup" size="45" id="emailn" placeholder="Enter your Email">        <br><br> <input type="submit" value="send">     </div>           </form> <script>      function checkvalidation(){     var name = document.forms["validationForm"]["firstname"].value;     var lname...

  • For this discussion, you will be working with regular expressions. Please create a regular expression that...

    For this discussion, you will be working with regular expressions. Please create a regular expression that requires passwords to begin with an uppercase letter, followed by five lowercase letters, followed by a one-digit number (0-9), and ending with one symbol (@, $, %, or &). You may use the index.htm file included with this discussion to test your regular expression. Note that the index.htm file contains HTML and JavaScript. To test your regular expression, simply assign your regular expression to...

  • This question relates to Javascript. Could you please show me why my code is not working?...

    This question relates to Javascript. Could you please show me why my code is not working? I want to create 2 text boxes and have the user enter something into both of them. If the text entered into both boxes is identical the a green message is made visible. If the boxes are different a red message is made visable. Please keep it simple because I am new to javascript. <html> <head>               <title></title>        <script>...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT