ZuoTi.Pro
Question

Question about JS form validation: I want to check these two input (name, question) with one...

Question about JS form validation:

I want to check these two input (name, question) with one function validateText. But how can I pass the input to the function, I did this but not working.

javascript part:

question = document.getElementById("question");

question.addEventListener("input", validateText);

pname = document.getElementById("name");

pname.addEventListener("input", validateName);

validateText function:

function validateText(e) {

var message = "";

var elem_name = e.name;

if (e.value.length == 0) { message = "You must enter a" + elem_name + "!";}

else if (e.validity.tooShort) { message = "Your" + elem_name + "is too short!";}

e.setCustomValidity(message);

e.title = message;

return message;

}

html part:

<label for="name">Name<span>*</span></label>

<input id="name" name="name" type="text" minlength="2">

<label class="blockLabel" for="question">Ask Us Any Quesion<span>*</span></label>

<textarea id="quesiton" name="question" rows="5" cols="55" minlength="15"></textarea>

When I do function for each instead of a generic validateText function, it can work:

So I think the part I did not get is how to create a generic function and pass value to it.

function validateName(e) {

var message = "";

if (pname.value.length == 0) { message = "You must enter a!";}

else if (pname.validity.tooShort) { message = "Youris too short!";}

pname.setCustomValidity(message);

pname.title = message;

return message;

}

Thank you so much!

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

Homework Answers

Answer #1

Your addeventlistener is problematic, you can directly attach the function for some event in the form element.

Below is the working source code for js validation for two different form elements with generic function.

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<script>

function validateText(e) {

var message = "";

var targetElement = e.target || e.srcElement;

if (targetElement.value.length == 0) {

message = "You must enter a value !";

}else if (targetElement.validity.tooShort) {

message = "Your data is too short!";

}else{

message = "Your data is verified";

}

targetElement.setCustomValidity(message);

targetElement.title = message;

alert(message);

return message;

}

</script>

</head>

<body><form>

<label for="name">Name<span>*</span></label>

<input id="name" name="name" type="text" minlength="2" onblur="return validateText(event)">

<label class="blockLabel" for="question">Ask Us Any Quesion<span>*</span></label>

<textarea id="question" name="question" rows="5" cols="55" minlength="15" onblur="return validateText(event)"></textarea>

</form>

</body>

</html>

0 0
Add a comment
Know the answer?
Add Answer to:
Question about JS form validation: I want to check these two input (name, question) with one...
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

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    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. ****************************************************************************** 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 =...

  • Add JavaScript code in the “find_primeV2.js” to allow users to enter a number, and then based...

    Add JavaScript code in the “find_primeV2.js” to allow users to enter a number, and then based on the number of user enters, to find out how many prime numbers there are up to and including the user inputted number and then display them on the web page. The following are the detailed steps to complete this assignment: Step 1. [30 points] In “find_primeV2.js”, complete isPrime() function by (1) Adding one parameter in function header. That parameter is used to accept...

  • 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'),...

  • <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...

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • 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....

  • 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>...

  • can you do this js and html question. ill give you the html and js and...

    can you do this js and html question. ill give you the html and js and css files just fix my error use if and else like what i did dont use switch just fix my erorr. <!DOCTYPE html> <!-- Webpage HTML document for Lab 4. Authors: Amirhossein Chinaei, Andriy Pavlovych For: EECS 1012, York University, Lassonde School of Engineering --> <html lang="En"> <head> <meta charset="UTF-8"> <!-- title for web page --> <title> EECS1012: Lab 4 - Computational Thinking </title>...

  • 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...

  • <!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"...

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