OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

HTML: How can I ensure fields on a form have been completed before allowing submission? [closed]

  • Thread starter Thread starter Luigi Alemanno
  • Start date Start date
L

Luigi Alemanno

Guest
I am writing a survey in HTML. It consists of some multi-choice selections and text fields. How can ensure that all the questions have been completed before allowing them to be submitted via the "Submit" button?

I have provided the relevant code below and would appreciate any suggestions on how I can validate the data before submission.


Code:
h1,
p {
  text-align: center;
  color: white;
}

body {
  background-image: url("https://images.spiceworks.com/wp-content/uploads/2023/05/17141122/Shutterstock_2079263023-768x384.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 19px;
}

label {
  text-align: left;
  display: block;
  color: white;
  padding: 10px;
  width: 100%;
  margin: 0 0 0 -10px;
}

input,
select {
  margin: 0px;
  width: 100%;
  min-height: 2em;
  padding: 15px;
  height: 3em;
}

form {
  width: 80%;
  margin: auto;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
  display: inline;
}

fieldset {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top: 0.2rem solid;
  border-color: #1E90FF;
}

legend {
  color: white;
}

.survey {
  width: 500px;
  background-color: rgba(0, 0, 0, 0.7);
  margin: 50px auto;
  padding: 30px;
}

.frog {
  margin: 0;
  width: 100%;
  min-height: 2em;
  padding: 10px;
}

select {
  margin: 0px;
  width: 100%;
  min-height: 2em;
  padding: 15px;
  height: 3em;
}

button {
  margin-top: 70px;
  padding: 10px 215px;
  text-align: center;
  font-size: 16px;
  background: #1E90FF;
  font-style: italic;
  cursor: pointer;
}

Code:
<head>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <h1 id="title">++++++ survey form </h1>
  <p id="description"> thanks for your time </p>
  <form method="post" action='https://register-demo.freecodecamp.org'>
    <div class="survey">
      <fieldset>
        <label id="name">Name</label>
        <input required id="name" name="name" placeholder="Give your name" type="text" />
        <label id="email">Email</label><input required id="email" name="email" placeholder="Give your email" type="email" />
        <label id="Age">Age (optional)</label> <input required id="age" name="age" placeholder="Give your age" type="number" min="13" max="120" />
      </fieldset>
      <fieldset>
        <label id="role">Which option best describes your current role?</label>
        <select id="role" name="role" class="frog">
          <option value=" ">Select role</option>
          <option value="full time">Full time</option>
          <option value="full time learner">Full time learner</option>
          <option value="student">Student</option>
          <option value="prefr not to say">Prefer not to say</option>
          <option value="other">Other</option>
        </select>

      </fieldset>
      <fieldset>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
      </fieldset>
      <fieldset>
        <label id="feauters likes">What is your favorite feature of freeCodeCamp? </label>
        <select id="feauters likes" name="feauters likes" class="frog">
          <option id=" "> Select an option</option>
          <option id="challenges">Challenges</option>
          <option id="projects">Projects</option>
          <option id="community">Community</option>
          <option id="open source">Open source</option>
          <option id="other">Other</option>
        </select>

      </fieldset>
      <fieldset>
        <legend>What would you like to see improved? (Check all that apply)</legend>
        <label for="front-end projects"><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
        <label for="front-end projects"><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Back-end Projects</label>
        <label for="data Visualization"><input type="checkbox" name="data Visualization" id="data Visualization" class="inline"/>Data Visualization</label>
        <label for="challenges"><input type="checkbox" name="challenges" id="challenges" class="inline"/>Challenges</label>
        <label for="front-end projects"><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
        <label for="gitter help rooms"><input type="checkbox" name="gitter help rooms" id="gitter help rooms" class="inline"/>Gitter help rooms</label>
        <label for="front-end projects"><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
        <label for="city Meetups"><input type="checkbox" name="city Meetups" id="city Meetups" class="inline"/>City Meetups</label>
        <label for="wiki"><input type="checkbox" name="wiki" id="wiki" class="inline"/>Wiki</label>
        <label for="forum"><input type="checkbox" name="forum" id="forum" class="inline"/>Forum</label>
        <label for="additional courses"><input type="checkbox" name="additional courses" id="additional courses" class="inline"/>Additional Courses</label>
      </fieldset>
      <fieldset>
        <label id="comments"> Any comments or suggestions?</label>
        <textarea name="comments" id="comments" rows="9" cols="58" placeholder="write here if you have any comments" /></textarea>
      </fieldset>
      <fieldet>
        <button type="button">SUBMIT</button>
        </fieldset>
  </form>
  </div>
</body>

</html>
<p>I am writing a survey in HTML. It consists of some multi-choice selections and text fields. How can ensure that all the questions have been completed before allowing them to be submitted via the "Submit" button?</p>
<p>I have provided the relevant code below and would appreciate any suggestions on how I can validate the data before submission.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>h1,
p {
text-align: center;
color: white;
}

body {
background-image: url("https://images.spiceworks.com/wp-co.../17141122/Shutterstock_2079263023-768x384.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 19px;
}

label {
text-align: left;
display: block;
color: white;
padding: 10px;
width: 100%;
margin: 0 0 0 -10px;
}

input,
select {
margin: 0px;
width: 100%;
min-height: 2em;
padding: 15px;
height: 3em;
}

form {
width: 80%;
margin: auto;
}

.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
display: inline;
}

fieldset {
border-left: 0;
border-right: 0;
border-bottom: 0;
border-top: 0.2rem solid;
border-color: #1E90FF;
}

legend {
color: white;
}

.survey {
width: 500px;
background-color: rgba(0, 0, 0, 0.7);
margin: 50px auto;
padding: 30px;
}

.frog {
margin: 0;
width: 100%;
min-height: 2em;
padding: 10px;
}

select {
margin: 0px;
width: 100%;
min-height: 2em;
padding: 15px;
height: 3em;
}

button {
margin-top: 70px;
padding: 10px 215px;
text-align: center;
font-size: 16px;
background: #1E90FF;
font-style: italic;
cursor: pointer;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><head>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<h1 id="title">++++++ survey form </h1>
<p id="description"> thanks for your time </p>
<form method="post" action='https://register-demo.freecodecamp.org'>
<div class="survey">
<fieldset>
<label id="name">Name</label>
<input required id="name" name="name" placeholder="Give your name" type="text" />
<label id="email">Email</label><input required id="email" name="email" placeholder="Give your email" type="email" />
<label id="Age">Age (optional)</label> <input required id="age" name="age" placeholder="Give your age" type="number" min="13" max="120" />
</fieldset>
<fieldset>
<label id="role">Which option best describes your current role?</label>
<select id="role" name="role" class="frog">
<option value=" ">Select role</option>
<option value="full time">Full time</option>
<option value="full time learner">Full time learner</option>
<option value="student">Student</option>
<option value="prefr not to say">Prefer not to say</option>
<option value="other">Other</option>
</select>

</fieldset>
<fieldset>
<legend>Account type (required)</legend>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
</fieldset>
<fieldset>
<label id="feauters likes">What is your favorite feature of freeCodeCamp? </label>
<select id="feauters likes" name="feauters likes" class="frog">
<option id=" "> Select an option</option>
<option id="challenges">Challenges</option>
<option id="projects">Projects</option>
<option id="community">Community</option>
<option id="open source">Open source</option>
<option id="other">Other</option>
</select>

</fieldset>
<fieldset>
<legend>What would you like to see improved? (Check all that apply)</legend>
<label for="front-end projects"><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
<label for="front-end projects"><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Back-end Projects</label>
<label for="data Visualization"><input type="checkbox" name="data Visualization" id="data Visualization" class="inline"/>Data Visualization</label>
<label for="challenges"><input type="checkbox" name="challenges" id="challenges" class="inline"/>Challenges</label>
<label for="front-end projects"><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
<label for="gitter help rooms"><input type="checkbox" name="gitter help rooms" id="gitter help rooms" class="inline"/>Gitter help rooms</label>
<label for="front-end projects"><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
<label for="city Meetups"><input type="checkbox" name="city Meetups" id="city Meetups" class="inline"/>City Meetups</label>
<label for="wiki"><input type="checkbox" name="wiki" id="wiki" class="inline"/>Wiki</label>
<label for="forum"><input type="checkbox" name="forum" id="forum" class="inline"/>Forum</label>
<label for="additional courses"><input type="checkbox" name="additional courses" id="additional courses" class="inline"/>Additional Courses</label>
</fieldset>
<fieldset>
<label id="comments"> Any comments or suggestions?</label>
<textarea name="comments" id="comments" rows="9" cols="58" placeholder="write here if you have any comments" /></textarea>
</fieldset>
<fieldet>
<button type="button">SUBMIT</button>
</fieldset>
</form>
</div>
</body>

</html></code></pre>
</div>
</div>
</p>
Continue reading...
 
Top