I need help with Javascript. I need to validate that none of the fields (name, phone number, email, etc) are left blank upon the user clicking 'Submit' and I need to also validate that the phone number and email fields are valid formats. The HTML: Test TestingInputs Home About Us Test Contact Us Name: Enter your name Email: Enter an email Phone Number: Enter a phone number How can we help you? Tell us how we can help you Submit
I need help with Javascript. I need to validate that none of the fields (name, phone number, email, etc) are left blank upon the user clicking 'Submit' and I need to also validate that the phone number and email fields are valid formats.
The HTML:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link href="Something.css" rel="stylesheet">
<title>Test</title>
<body>
<header>
<h1>TestingInputs</h1>
</header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Test</a></li>
</ul>
</nav>
<main>
<style>
h2 {
text-align: center;
font-size: 40px;
}
</style>
<h2>Contact Us</h2>
<section id="contact-input">
<style>
label {
display: inline-block;
width: 660px;
text-align: right;
}
</style>
<div>
<label for="name">Name:</label>
<input type="text" id="name">
<span class="error-msg hidden" id="error-value-name">Enter your name</span>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email">
<span class="error-msg hidden" id="error-value-email">Enter an email</span>
</div>
<div>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone">
<span class="error-msg hidden" id="error-value-phone">Enter a phone number</span>
</div>
<div>
<label for="help">How can we help you?</label>
<input type="text" id="help" class="helpBox">
<span class="error-msg hidden" id="error-value-help">Tell us how we can help you</span>
</div>
<div>
<button id="submitBtn">Submit</button>
</div>
</section>
</main>
</body>
</html>
Step by step
Solved in 5 steps with 3 images
