Скрытие формы, когда все поля верны

Question

Скрытие формы, когда все поля верны

1

Мне нужно скрыть форму и отобразить страницу подтверждения, как только все поля будут заполнены правильно

Это моя форма.

    <div id="form">

    <form name="info">
    <p>
    <label>First Name</label><br />
    <input type="text" id="first-name"/> <span id="fn-error"> </span>
    </p>

    <p>
    <label>Last Name</label><br />
    <input type="text" id="last-name"/> <span id="ln-error"> </span>
    </p>

    <p>
    <label>Email</label> <br />
    <input type="text" id="email"/> <span id="email-error"> </span>
    </p>

    <p>
     <label>Email Confirmation </label><br />
     <input type="text" id="email-confirm"/> <span id="emailConfirm-error"> </span>
     </p>


    <p>
    <label>Phone Number </label> <br />
    <input type="text" id="phone"/> <span id="phone-error"> </span>
    </p>

    <input type="button" value="submit" id="submit" onclick="" />
    </form>

</div>

<div id="confirmation">
    <h1>Confirmation</h1>
    <p id="info">
    </p>
</div>

</body>
</html>

и это моя страница проверки...

    window.addEventListener('load', init)

function init(e)
{

    var firstName = document.querySelector('#first-name');
    var lastName = document.querySelector('#last-name');
    var email = document.querySelector('#email');
    var emailConfirm = document.querySelector('#email-confirm');
    var phoneNumber = document.querySelector('#phone');
    var submit = document.querySelector('#submit');
    var input = document.querySelectorAll('input');
    var span = document.querySelectorAll('span');
    var label = document.querySelectorAll('label');
    var fields = document.querySelectorAll("#form input[type=text]");
    var form = document.querySelector('#form');


    submit.addEventListener('click', Edit);
    submit.addEventListener('click', EmailConfirm);
    submit.addEventListener('click', Results);

    function Edit(e)
    {
        for (let i = 0; i < fields.length; i++)
        {
            if (fields[i].value=="")
            {
                span[i].innerHTML = "*";
                span[i].style.color = "red"
                label[i].style.color = "red";
            }
            else
            {
                span[i].innerHTML="";
                label[i].style.color = "black";
            }
        }
    }

    function EmailConfirm(e)
    {
            if (email.value !== emailConfirm.value)
            {
                span[2].innerHTML = "Emails do not match";
                span[3].innerHTML = "Emails do not match"
            }
            else
            {
                span[2].innerHTML = "";
                span[3].innerHTML = "";
            }
    }

    function Results(e)
    {


    }

Мне нужно иметь возможность скрывать форму после заполнения всех полей и подтверждения по электронной почте и электронной почте и отображать страницу подтверждения, на которой будет распечатываться вся информация, которая заполнена, но я не могу понять, что как только вся информация верна, чтобы скрыть форму.

B.Leigh 14 авг. 2018, в 23:00

Источник

0

Я думаю, что это решит developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
A. Meshu 14 авг. 2018, в 20:45

Теги:

javascript

2 ответа

Ещё вопросы

Я думаю, что это решит developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Bigga_HD · Answer 1 · 2018-08-14T22-44-00.000Z

// Check to see if any value has been entered

function validate() {
 const val1 = document.getElementById('one').value;
 const val2 = document.getElementById('two').value;

 if ((val1.length <= 0) || (val2.length <= 0)) {
   alert('Please fill out the form'); // If form is NOT filled out
   return false;   
 }
   alert('Congrats. All done, buddy :)');
   return true;  // Otherwise return TRUE and make them disappear
 }


// This is our function that uses CSS to target specific elements and
// hide them, depending on our 'basic' logic implemented here

function hideIt() {
       const x = document.getElementById('one');
       const y = document.getElementById('two');
       const z = document.getElementById('three');



if(validate()) { // If it ends up 'true' hide the HTML elements
        x.style.visibility = 'hidden';
        y.style.visibility = 'hidden';
        z.style.visibility = 'hidden';

  } else {
        x.style.visibility = 'visible';
        y.style.visibility = 'visible';
        z.style.visibility = 'visible';
  }
};

<!DOCTYPE html>
<html>
<body>

<h1 id="heading">Hide inputs:</h1>


<form>
  <input type="text" placeholder="Email" id="one" /> 
  <input type="password" placeholder="Password" id="two"/>
  <!- Here we take advantage of our 'hideIt function -->
  <button onclick="hideIt()" type="button" id="three">Try Me</button>
</form>

</body>
</html>

Очевидно, вы можете настроить это гораздо больше, но я так и сделаю, или, по крайней мере, это хорошая отправная точка. Надеюсь, поможет :)

Duran Humes · Answer 2 · 2018-08-14T19-20-00.000Z

Это может быть потенциальным решением вашей проблемы.

Возьмите элемент формы, и после ваших выборочных проверок вы можете либо

const form = document.querySelector('#form');

Используйте CSS для отображения: none 'формы ie form.style.display = 'none';
Используйте JS для удаления элемента из form.parentNode.removeChild(form);

Вот как я обычно это делаю. дайте мне знать, если это поможет.

Затем мне нужна форма, чтобы иметь возможность скрыть и отобразить страницу подтверждения, когда вся проверка верна, но это, кажется, просто скрывает форму, является ли проверка верной или нет
Да, оберните form.style.display = 'none'; в операторе if, чтобы проверить, прошла ли ваша проверка. т.е. let validated = false; if (email.value !== emailConfirm.value) { span[2].innerHTML = "Emails do not match"; span[3].innerHTML = "Emails do not match" } else { span[2].innerHTML = ""; span[3].innerHTML = ""; validated = true; } if (validated) { form.style.display = 'none'; }