Slidepage

Question

Don-pasqual

20 Aug 2021 à 10:07

Bonjour,
je suis en train de faire un formulaire step by step. Le soucis est que sans le javascript le navigateur passe d'une page à une autre automatiquement, et en ajoutant mon script il saute à chaque fois une page. Mais bizarrement sans overflow:hidden ça fonctionne bien.
Comment pourrais-je faire ?
Et aussi je voudrais que lorsque un champs est vide et qu'on clique sur suivant, faire que ce soit une croix qui apparaisse. Mais je ne sais pas comment faire.
Merci

<!doctype html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" media="screen">
    <link rel="stylesheet" href="../style.css" media="screen">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <title>Foooo - <?php echo $title ?></title>
</head>
<body>
    <div class="signUp">
        <div class="signUp-container">
            <div class="err">
                <?php if ($msgErr) : ?>
                    <?php echo $msgErr ?>
                <?php endif ?>
            </div>
            <h1>S'inscrire</h1>
            <div class="progress-bar">
                <div class="step">
                    <p>Identité</p>
                    <div class="bullet">
                        <span>1</span>
                    </div>
                    <div class="check fas fa-check"></div>
                </div>
                <div class="step">
                    <p>Contact</p>
                    <div class="bullet">
                        <span>2</span>
                    </div>
                    <div class="check fas fa-check"></div>
                </div>
                <div class="step">
                    <p>Adresse</p>
                    <div class="bullet">
                        <span>3</span>
                    </div>
                    <div class="check fas fa-check"></div>
                </div>
                <div class="step">
                    <p>Valider</p>
                    <div class="bullet">
                        <span>4</span>
                    </div>
                    <div class="check fas fa-check"></div>
                </div>
            </div>
            <div class="form-outer">
                <form action="" method="post">
                    <div class="page slidepage">
                        <div class="field">
                            <div class="label">Que recherchez-vous ?*</div>
                            <select name="job">
                                <option value="">Sélectionnez une valeur</option>
                                <option value="1">À la recherche d'un(e) employé(e)</option>
                                <option value="2">À la recherche d'un job</option>
                            </select>
                        </div>
                        <div class="field">
                            <div class="label">Nom*</div>
                            <input type="text" name="name" required>
                        </div>
                        <div class="field">
                            <div class="label">Prénom*</div>
                            <input type="text" name="firstname" required>
                        </div>
                        <div class="field">
                            <div class="label">Date de naissance*</div>
                            <input type="date" name="birth" title="Date de naissance*" required>
                        </div>
                        <div class="field nxtBtn">
                            <button>Suivant</button>
                        </div>
                    </div>
                    <div class="page">
                        <div class="field">
                            <div class="label">E-mail*</div>
                            <input type="email" name="login" required>
                        </div>
                        <div class="field">
                            <div class="label">Téléphone*</div>
                            <input type="tel" name="tel" required>
                        </div>
                        <div class="field btns">
                            <button class="prev-1 prev">Retour</button>
                            <button class="next next-1">Suivant</button>
                        </div>
                    </div>
                    <div class="page">
                        <div class="field">
                            <div class="label">Adresse*</div>
                            <input type="text" name="adress" required>
                        </div>
                        <div class="field">
                            <div class="label">Ville*</div>
                            <input type="text" name="city" required>
                        </div>
                        <div class="field">
                            <div class="label">Code postal*</div>
                            <input type="text" name="cp" pattern="[0-9]{5}" required>
                        </div>
                        <div class="field btns">
                            <button class="prev-2 prev">Retour</button>
                            <button class="next next-2">Suivant</button>
                        </div>
                    </div>
                    <div class="page align">
                        <div class="field">
                            <div class="label">Mot de passe *</div>
                            <input type="password" name="pswd" id="pswd" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[-+!*$@%_])([-+!*$@%_\w]{8,30})$" title="De 8 à 30 caractères, un chiffre, une lettre majuscule, une lettre minuscule et un de ces caractères: $ @ % * + - _ !" required>
                        </div>
                        <div class="field">
                            <div class="label">Répéter le mot de passe*</div>
                            <input type="password" name="re-pswd" required>
                        </div>
                        <div class="field btns">
                            <button class="prev-3 prev">Retour</button>
                            <input type="submit" class="submitBtn" name="submitsignUp" value="Valider">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="app.js" type="text/javascript"></script>
</body>

</html>

.signUp-container {
    width: 400px;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    padding: 0 35px;
}

.signUp-container .form-outer {
    width: 100%;
    overflow: hidden;
}

.form-outer form {
    display: flex;
    width: 400%;
}

.form-outer form .page {
    width: 25%;
    transition: 0.3s ease-in-out;
}

.form-outer form .page .field {
    height: 45px;
    width: 100%;
    margin: 45px 0;
    position: relative; 
    display: flex;
    justify-content: space-between;
}

.form-outer form .page .field .label {
    position: absolute;
    top: -25px;
}

.form-outer form .page .field input,
.form-outer form .page .field select {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    font-size: 1.2em;
    padding: 10px;
}

.form-outer form .page .field select {
    border: 2px solid;
}

.form-outer form .page .field button {
    width: 100%;
    height: calc(100% + 5px);
    border-radius: 10px;
}

.infoForm {
    color: #000;
    float: left;
}

.form-outer form .page .btns button {
    width: 45%;
}


.signUp-container .progress-bar {
    display: flex;
    margin: 40px 0 10px 0;
}

.signUp-container .progress-bar .step {
    text-align: center;
    width: 100%;
    position: relative;
}

.progress-bar .step p {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
    transition: 0.2s;
}

.progress-bar .step p.active {
    color: dodgerblue;
}

.progress-bar .step .bullet {
    position: relative;
    height: 25px;
    width: 25px;
    border: 2px solid #262626;
    display: inline-block;
    border-radius: 50%;
    font-weight: 500;
    font-size: 17px;
    transition: 0.2s;
}

.progress-bar .step .bullet.active{
    border-color: dodgerblue;
    background-color: dodgerblue;
}

.progress-bar .step .bullet::before,
.progress-bar .step .bullet::after {
    position: absolute;
    content: '';
    height: 3px;
    width: 50px;
    background-color: #262626;
    bottom: 8px;
    right: -56px;
}

.progress-bar .step:last-child .bullet::before,
.progress-bar .step:last-child .bullet::after {
    display: none;
}

.progress-bar .step .bullet.active:after {
    background-color: dodgerblue;
    transform: scaleX(0);
    transform-origin: left;
    animation: anim 0.8s linear forwards;
}

@keyframes anim {
    100% {
        transform: scaleX(1);
    }
}

.progress-bar .step .bullet span {
    font-weight: 500;
    font-size: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.2s;
}

.progress-bar .step .bullet.active span{
    display: none;
}


.progress-bar .step .check {
    display: none;
    position: absolute;
    left: 50%;
    top: 70%;
    font-size: 15px;
    transform: translate(-50%, -50%);
    color: #fff;
}

.progress-bar .step  .check.active{
    display: block;
}

const slidePage = document.querySelector(".slidepage");
const firstNext = document.querySelector(".nxtBtn");
const secNext = document.querySelector(".next-1");
const secPrev = document.querySelector(".prev-1");
const thirdNext = document.querySelector(".next-2");
const thirdPrev = document.querySelector(".prev-2");
const fourthPrev = document.querySelector(".prev-3");
const progressText = document.querySelectorAll(".step p");
const progressCheck = document.querySelectorAll(".step .check");
const bullet = document.querySelectorAll(".step .bullet");
const submit = document.querySelector(".submitBtn");

let max = 4;
let current = 1;

firstNext.addEventListener("click", function () {
    slidePage.style.marginLeft = '-25%';
    bullet[current - 1].classList.add("active");
    progressText[current - 1].classList.add("active");
    progressCheck[current - 1].classList.add("active");
    current += 1;
});
secNext.addEventListener("click", function () {
    slidePage.style.marginLeft = '-50%';
    bullet[current - 1].classList.add("active");
    progressText[current - 1].classList.add("active");
    progressCheck[current - 1].classList.add("active");
    current += 1;
});
thirdNext.addEventListener("click", function () {
    slidePage.style.marginLeft = '-75%';
    bullet[current - 1].classList.add("active");
    progressText[current - 1].classList.add("active");
    progressCheck[current - 1].classList.add("active");
    current += 1;
});

secPrev.addEventListener("click", function () {
    slidePage.style.marginLeft = '0%';
    bullet[current -2].classList.remove("active");
    progressText[current - 2].classList.remove("active");
    progressCheck[current - 2].classList.remove("active");
    current -= 1;
});
thirdPrev.addEventListener("click", function () {
    slidePage.style.marginLeft = '-25%';
    bullet[current -2].classList.remove("active");
    progressText[current - 2].classList.remove("active");
    progressCheck[current - 2].classList.remove("active");
    current -= 1;
});
fourthPrev.addEventListener("click", function () {
    slidePage.style.marginLeft = '-50%';
    bullet[current -2].classList.remove("active");
    progressText[current - 2].classList.remove("active");
    progressCheck[current - 2].classList.remove("active");
    current -= 1;
});

submit.addEventListener("click", function() {
    bullet[current - 1].classList.add("active");
    progressText[current - 1].classList.add("active");
    progressCheck[current - 1].classList.add("active");
    current += 1;
    // setTimeout(function() {
    //     alert("Merci ?");   
    // }, 800);
});

Sujet clos

JavaScript, DOM et API Web HTML5

Slidepage