USING HTML and JAVASCRIPT Create a Contact page that includes: A) A form for new
ID: 3846094 • Letter: U
Question
USING HTML and JAVASCRIPT
Create a Contact page that includes:
A) A form for new clients to fill out and submit
The form must contain the following fields:
o First Name
o Last Name
o Street Address
o City
o State
o Zip Code
o Message
B) A button labeled “Submit”
When the button is clicked, the data in the form should be validated.
Validation should confirm that all input meets the following requirements:
o All fields are required and therefore must contain some data.
o The data in the First Name field must be greater than 1 character and less than 20.
o The data in the Last Name field must be greater than or equal to three characters, and less than 20.
o The data in the State field must be exactly two characters.
If the form contains any invalid data based on the rules defined above, a “glyphicon-remove” icon should be displayed next to the field (HINT: By adding/removing one more classes to/from a span via a JavaScript, glyphicons can toggle on/off dynamically) and an alert message should be displayed instructing the user to fix the error.
o NOTE: If invalid data is corrected, the glyphicon-remove should be removed.
If all fields are validated as containing correct input, a confirm window should be displayed.
o The confirm window should include the following content:
The content from all fields
A request for the user to confirm the input with OK, or CANCEL to edit
o If the user selects OK in the confirm window:
An alert window should be displayed indicating that the message was sent, along with a date/time stamp of the current time.
The form should be reset (all text should be cleared and no glyphicons should be visible).
o If the user selected CANCEL in the confirm window:
The confirm window should close and all user data should remain in the form.
Explanation / Answer
The code for the above question is as follows. The function validateForm contains the java script to validare wach elements of the form. Two forms are created, one for the contact page named as "contact" and another for confirmation named as "confirm",
The "required" keyword is used to confirm that all the fileds are entered.
//java script
function validateForm() {
var x = document.forms["contact"]["fname"].value;
var y=document.forms["contact"]["lname"].value;
var z=document.forms["contact"]["street"].value;
if((x.match(regexpfname))&&(y.match(regexplname)&&(z.match(regexpstate)))
{
window.location.assign("confirm.html") //redirects to confirm page
}
else
{
alert(" Name must be filled out");
return false;
}
}
<form name="contact" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
<div class="container">
<label><b>First Name</b></label>
<input type="text" placeholder="Enter Name" name="fname" required>
<label><b>Last Name</b></label>
<input type="text" placeholder="Enter Name" name="lname" required>
<div align="center">
<br><br>
<label><b>Street Address</b></label>
<textarea cols="40" rows="5" name="street">
</textarea>
<br><br>
</div>
<label><b>City</b></label>
<input type="text" placeholder="Enter City" name="city" required>
<label><b>State</b></label>
<input type="text" placeholder="Enter State" name="state" required>
<label><b>Zip code</b></label>
<input type="text" placeholder="Enter Zipcode" name="zipcode" required>
<div align="center">
<br><br>
<label><b>Message</b></label>
<textarea cols="40" rows="5" name="message">
</textarea>
<br><br>
</div>
<button type="submit" class="signupbtn">Submit</button>
</div>
</div>
</form>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.