How to make this code validate before going to the next page?

Question

The problem with this html fieldset form code is that when I click the submit button it does go to the next page but If I remove "next" from the button class it validates but it does not go to the next page.Fix it for me please.

I have repeated the above details because for some reason I could not post my code,sorry for that.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
fieldset {
border: 0;
}

</style>
</head>

<style>
* {
  box-sizing: border-box;
}

body {
  background-image: url("ok.png");
  background-repeat: no-repeat;
}

h1 {
  text-align: center;  
}

input {
  padding: 10px;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* comment */


button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

}


</style>


<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <fieldset>
  <br><br><br><br>
    <label>Q1</label>

    <form id="myForm1">
  <div class="form-row">
    <div class="col-md-4 mb-3">

      <input type="text" class="form-control" placeholder="First Book" value="" required><br>
      <input type="text" class="form-control" placeholder="Second Book" value="" required ><br>

    </div>
</form>
  <button class="next btn btn-primary btn-block" type="submit" onclick="ShowText1();"  >Submit form</button>


<script>
    function ShowText1(){
    // find each input field inside the 'myForm' form:
    var inputs = myForm1.getElementsByTagName('input');
    // declare 'box' variable (textarea element):
    var box = document.getElementById('show');
    // clear the 'box':
    box.value = '';
    // loop through the input elements:
    for(var i=0; i<inputs.length; i++){
        // append 'name' and 'value' to the 'box':
        box.value +=inputs[i].value+'\n';
    }
}
</script>
</fieldset>
<fieldset>

    <label>Q2</label>
    <form id="myForm">
        <input id="show" type="text" name="name" placeholder="Books"/><br/>
    <input type="text" name="age"  placeholder="Age"/><br/>
    <input type="text" name="status" placeholder="Status"/><br/>

</form>
    <button ID="idsend" type="submit"  >Submit</button>

</fieldset>


</section>
</body>
</html>

<script>
var len=$("section:first").children().length;
var i=0;
var s=0;
$(".next").click(function(){
i++;
if(len==i){
var p=$(this).parent().parent('section').next();
p.show();
p.children().first().show();
len=0;
i=0;
len=p.children().length;

$(this).parent().parent().hide();

}
else{
$(this).parent().next().show();
$(this).parent().hide();
}
});
$(document).ready(function(){
$("section").hide();
$("section:first").show();
$("fieldset").hide();
$("fieldset:first").show();
});

</script>

<script>
#form section:not(:first-of-type) {
  display: none;
}

#form fieldset:not(:first-of-type) {
  display: none;
}
.hide{
  display:none;

}
</script>

score 0 · Answer 1 · answered Apr 01 '20 at 03:26

I have identified the error that was causing the code to malfunction using Dreamweaver's error checker/lint. There was not a closing </div> tag for <div class="form-row">. This meant that the <form id="myForm1"></form> tags could not run properly because it was missing the closing </div> and had confused the program on the function of the code.

Your code here that had the error:

<form id="myForm1">
  <div class="form-row">
    <div class="col-md-4 mb-3">

      <input type="text" class="form-control" placeholder="First Book" value="" required><br>
      <input type="text" class="form-control" placeholder="Second Book" value="" required ><br>

    </div>
</form>

I also recommend that you put you <script></script> tags inside your <head></head> or <body></body> tags since it will load better or slightly faster as well as it is common practice to do so.

Reference for where <script></script> tags should go: Where should I put <script> tags in HTML markup?

Link to HTML Lint to marginally reduce less errors in your code: https://www.freeformatter.com/html-validator.html

To use the HTML Lint, just copy your code, paste it into the website, and then click Validate HTML.

You're Welcome. :D

How to make this code validate before going to the next page?

1 Answers1