HTML Post with multiple pages

[Skythrust]

Hi there,

I am developing a register page and I found some really interesting code from W3 Schools.

Only problem is, I would like to have a couple of inputs as requirements but not everything. First-/lastname are required and the mailaddress the rest not.

Can someone help me out with this question?
I have put the whole code in A pen

You must be registered for see links

Thanks in advance!

 

[Hypothesis]

Simply just add required to the end of each tag you want to be required, here's your codepen, I've added the required tag to the ones you stated.

You must be registered for see links

 

[RastaLulz]

What have you tried?

 

[Skythrust]

Simply just add required to the end of each tag you want to be required, here's your codepen, I've added the required tag to the ones you stated.

You must be registered for see links

I see, but stille middlename is required if you try to click on next, same as the rest. It should like be something in the script but I can't delete that.

 

[Higoka]

in your js, change

if (y[i].value == "") {

to

if (y[i].value == "" && i !== 1) {

this will check if the input is empty and if its not the second field which in your case would be the middlename field

 

[Skythrust]

in your js, change

if (y[i].value == "") {

to

if (y[i].value == "" && i !== 1) {

this will check if the input is empty and if its not the second field which in your case would be the middlename field

Thanks! This is the solution.

Next question about the multiple pages, in the code below he is showing some buttons after clicking on next. Only the type is not a submit type so I can't post my data.
Any idea how I can realise that?

function showTab(n) {
              // This function will display the specified tab of the form...
              var x = document.getElementsByClassName("tab");
              x[n].style.display = "block";
              //... and fix the Previous/Next buttons:
              if (n == 0) {
                document.getElementById("prevBtn").style.display = "none";
              } else {
                document.getElementById("prevBtn").style.display = "inline";
              }
              if (n == (x.length - 1)) {
                document.getElementById("nextBtn").innerHTML = "Submit";
              } else {
                document.getElementById("nextBtn").innerHTML = "Next";
              }
              //... and run a function that will display the correct step indicator:
              fixStepIndicator(n)
            }

 

[Higoka]

just change <button type="button"> to <button type="submit">

 

[Skythrust]

just change <button type="button"> to <button type="submit">

I had already tried that.

<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
 <button type="submit" id="nextBtn" onclick="nextPrev(1)">Next</button>

function showTab(n) {
              // This function will display the specified tab of the form...
              var x = document.getElementsByClassName("tab");
              x[n].style.display = "block";
              //... and fix the Previous/Next buttons:
              if (n == 0) {
                document.getElementById("prevBtn").style.display = "none";
              } else {
                document.getElementById("prevBtn").style.display = "inline";
              }
              if (n == (x.length - 1)) {
                document.getElementById("nextBtn").innerHTML = "Submit";
              } else {
                document.getElementById("nextBtn").innerHTML = "Next";
              }
              //... and run a function that will display the correct step indicator:
              fixStepIndicator(n)
            }

Thing is only, that the 'Next' button is the 'Submit' button

Post automatically merged: Dec 29, 2019

Somebody any other idea's how I can fix it?