form with scroll feature

on error validate to scroll up on error block

by Sunny SM

HTML

<!DOCTYPE html>
<html>
<body>
<h1>The Element Object</h1>
<h2>The scrollTop and scrollLeft Properties</h2>

<p>Click "Scroll" to scroll the contents of "myDIV" to 50px horizontally and 10px vertically.</p>

<div id="myDIV">
  <div>
  <p class="block" id="box1">
  	<input type="text" name="box1" />
  </p>
  <p class="block" id="box2">
  	<input type="text" name="box2" />
  </p>
  <p class="block" id="box3">
  	<input type="text" name="box3" />
  </p>
  <p class="block" id="box4">
  	<input type="text" name="box4" />
  </p>
  <p class="block" id="box5">
  	<input type="text" name="box5" />
  </p>
  <p class="block" id="box6">
  	<input type="text" name="box6" />
  </p>
  <p class="block" id="box7">
  	<input type="text" name="box7" />
  </p>
  <p class="block" id="box8">
  	<input type="text" name="box8" />
  </p>
  <p class="block" id="box9">
  	<input type="text" name="box9" />
  </p>
  <p class="block" id="box10">
  	<input type="text" name="box10" />
  </p>
  <p class="block" id="box11">
  	<input type="text" name="box11" />
  </p>
  <p class="block">
  	<button onclick="validation()"> Submit </button>
  </p>
  </div>
</div>
<script>
	function validation() {
    const num = Math.ceil(Math.random() * 10);
    console.log(`#box${num}`);
    const section = document.querySelector(`#box${num}`);
    section.scrollIntoView( { behavior: 'smooth', block: 'start' } );
  }
</script>
</body>
</html>

CSS

.block {
  box-sezing: border-box;
  padding: 25px 10px;
  width: 90%;
  border: 1px solid grey;
}