Preview

06 - Working with Forms (getElementbyID, features

 1. The following produces a simple HTML form that asks for user input and has a submit button. What does the JavaScript do?
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

  None of the given answers are valid

  In this example, the JavaScript function is giving the variable 'x' the nane -f.name

  In this example, the JavaScript function is validating the input. A name must be present before pressing 'Submit'

  In this example, the JavaScript is responsible for the creation of the input box and button

 2. In the following example, there is an error. Can you spot what it is?
<!DOCTYPE html>
<html>
<body>

<p>Enter names in the fields, then click "Submit" to submit the form:</p>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Submit">
</form>

<script>
function myForm() {
  document.getElementById("frm1").submit();
}
</script>

</body>
</html>

  The name of the function is 'myForm', but the 'onclick' event is calling a function with a different name

  The whole line that creates the button, starting with "

  There are no errors - the form and submission would work perfectly

  The function 'myForm' should be moved outside the script tags and into the HTML

 3. Analyse the following code and decide which statement is accurate. Assume the input into the two text boxes is: "Test" and "Track"
<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 


<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("frm1");
  var text = "";
  var i;
  for (i = 0; i < x.length ;i++) {
    text += x.elements[i].value + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

  Clicking the 'Try it' button will display the words 'Test, Track, Submit' underneath the button

  There will be an error on clicking the 'Try it' button, as there is no valid JavaScript

  Clicking the 'Submit' button will display the words 'Test, Track, Submit' underneath the button

  Only one button will be displayed on this form as only one is linked to JavaScript

 4. What does the following JavaScript function do?
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
} 

  If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted

  If a form field (fname) has been filled in, this function alerts a message, and returns true, to prevent the form being submitted

  It creates a variable called x and alerts a message if the value of x is set to false

  If a form field (fname) is left blank, then this function returns true so that the form is still submitted

 5. In the following example, can you fill in a comment that would be appropriate for //1. _________________
<!DOCTYPE html>
<html>
<body>
<p>Please input __________________________________:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x, text;

  // 1. __________________________________________________
  x = document.getElementById("numb").value;

  // 2.___________________________________________________
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html> 

  Get the value of the input field with the text input that matches 'numb'

  Get the value of 'id' only if 'numb' is entered in the textbox

  Get the value of the output field with numb="id"

  Get the value of the input field with id="numb"

 6. In the following example, can you fill in a comment that would be appropriate for //2. _________________
<!DOCTYPE html>
<html>
<body>
<p>Please input __________________________________:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x, text;

  // 1. __________________________________________________
  x = document.getElementById("numb").value;

  // 2.___________________________________________________
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html> 

  If x is not a text input or an integer between 1 to 10

  If x is a number and is greater than 10

  If x is not a number or less than one or greater than 10

  If x is not a number or less than 10 only

 7. What would the most appropriate instruction be in line 4 of this code?
<!DOCTYPE html>
<html>
<body>
<p>Please input __________________________________:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x, text;

  // 1. __________________________________________________
  x = document.getElementById("numb").value;

  // 2.___________________________________________________
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html> 

  a number that is less than 10

  text only (no numbers)

  a number between 1 and 10

  a number that is greater than 10 only

 8. Most often, the purpose of data validation is to ensure correct user input. Client side validation is performed by a web server, after input has been sent to the server.

  FALSE

  TRUE

 9. Client side validation is performed by a web browser, before input is sent to a web server

  FALSE

  TRUE

 10. On line 10, can you fill in the blanks with the text that would describe what the program does?
<!DOCTYPE html>
<html>
<body>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p>If the number is ______________________________________________________.</p>

<p id="demo"></p>

<script>
function myFunction() {
  var inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  } 
} 
</script>

</body>
</html>

  less than 100 or greater than 300, an error message will be displayed

  between 100 or 300, an error message will be displayed

  greater than 1 or less than 300, an error message will be displayed

  either 100 or 300, an error message will be displayed

 11. The validity property of an input element contains a number of properties related to the validity of data. The use of it is shown here
 <input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt = "";
  if (document.getElementById("id1").validity.rangeOverflow) {
    txt = "Value too large";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script> 

  TRUE

  FALSE

 12. If you enter '6' as the input in this example, what will the output message be?
<!DOCTYPE html>
<html>
<body>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  var txt = "";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    txt = "Value too small";
  } else {
    txt = "Input OK";
  } 
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

  Value too large

  OK

  Input OK

  Value too small

 13. Which statement is true of the following code?
<script type = "text/javascript">
   <!--
      // Form validation code will come here.
      function validate() {
      
         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 5 ) {
            
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
   //-->
</script>

  This code is calling the onsubmit function and shows the implementation of the onsubmit function to convert all input into uppercase (for postcode)

  We are calling validate() to validate data when onsubmit event is occurring. The following code shows the implementation of this validate() function

  This code calls the validate() function but as there is no onsubmit event, it will not run

  This code is validating the entry of a zip code to prevent numbers of any sort from being input

 14. Server-side validation is not as user-friendly as client-side validation, as it does not provide errors until the entire form has been submitted.

  FALSE

  TRUE

 15. What statement is true of the following code that seeks to validate an input email address?
<script type = "text/javascript">
   <!--
      function validateEmail() {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");
         
         if (atpos < 1 || ( dotpos - atpos < 2 )) {
            alert("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
   //-->
</script>

  All of the listed statements here are true of this code.

  An email address must contain at least a ‘@’ sign and a dot (.)

  The last dot must at least be one character after the ‘@’ sign

  The ‘@’ must not be the first character of the email address