JavaScript DOM Operation Exercise Use JavaScript to validate a form . You will u
ID: 3564437 • Letter: J
Question
JavaScript DOM Operation
Exercise
Use JavaScript to validate a form. You will use an alert box and DOM Operations (You may also use innerHTML since it's much easier than DOM operations) to indicate that fields are missing values. If there are no errors, you will use JavaScript to display (below the form) all of the fields that were entered.
Details:
The following is an example of the pop-up alert and the red text messages above the three empty fields:
Note:
Make sure to design a proper logic for the warnings, for example, if inputs of ID and FirstName are incorrect and input of LastName is correct, you should only give warnings for the FirstName and ID. (0.1 marks)
The results will look like this. (Notice the values in the form have been cleared (0.2 marks)
Note:
You may either use innerHTML or DOM operations to display user inputs. You should only display the last inputs (ID, FirstName, LastName) if clicking Add button multiple times. (0.2 marks)
JavaScript DOM Operation Exercise Use JavaScript to validate a form. You will use an alert box and DOM Operations (You may also use innerHTML since it's much easier than DOM operations) to indicate that fields are missing values. If there are no errors, you will use JavaScript to display (below the form) all of the fields that were entered. Details: Create a form with text fields for ID, FirstName, and LastName, and a button called Add. (0.3 marks) Form On clicking the Add button, a JavaScript will be called that checks that all fields have something. Two things will happen if a field is missing values: One alert box will pop up indicating which fields were missing values. (0.13 marks) Red text will appear above the field(s) that is(are) missing values. You can use innerHTML or DOM Operations for this. (0.2 marks) The following is an example of the pop-up alert and the red text messages above the three empty fields: FormError Note: Make sure to design a proper logic for the warnings, for example, if inputs of ID and FirstName are incorrect and input of LastName is correct, you should only give warnings for the FirstName and ID. (0.1 marks) If you enter all the values correctly, use JavaScript to display the results at the bottom of the form. (0.2 marks) The results will look like this. (Notice the values in the form have been cleared (0.2 marks) FormDone Note: You may either use innerHTML or DOM operations to display user inputs. You should only display the last inputs (ID, FirstName, LastName) if clicking Add button multiple times. (0.2 marks)Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="UTF-8">
<title>Javascript Form</title>
<script type="text/javascript">
function add(){
var id = document.getElementById("id").value;
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
if(id=="" || id==null){
alert('Id is empty');
document.getElementById("idError").innerHTML = "Id is Empty";
}
else{
document.getElementById("idError").innerHTML = "";
}
if(firstName=="" || firstName==null){
alert('First Name is empty');
document.getElementById("firstError").innerHTML = "First Name is Empty";
}
else{
document.getElementById("firstError").innerHTML = "";
}
if(lastName=="" || lastName==null){
alert('Last Name is empty');
document.getElementById("lastError").innerHTML = "Last Name is Empty";
}
else{
document.getElementById("lastError").innerHTML = "";
}
if(id=!"" && id!=null && firstName!="" && firstName!=null && lastName!="" && lastName!=null) { // check all conditions
var display = "ID: "+id+"<br> FirstName: "+firstName+"<br> LastName: "+lastName;
document.getElementById("display").innerHTML = display;
}
else{
document.getElementById("display").innerHTML = "";
}
return false; // to prevent form submission
}
</script>
</head>
<body>
<form action="#" method="post" >
<!-- Table added for better alignment -->
<table>
<tr>
<td>ID</td>
<td><input type="text" id="id" name="id"/></td>
<td id="idError"></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="firstName" name="firstName" /></td>
<td id="firstError"></td>
</tr>
<tr>
<td>LastName</td>
<td><input type="text" id="lastName" name="lastName"/></td>
<td id="lastError"></td>
</tr>
<tr>
<td><input type="submit" value="Add"/></td>
</tr>
</table>
</form>
<p id="display">
</p>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.