11528 sujets

JavaScript, DOM et API Web HTML5

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);
});
Meilleure solution