Js форма валидатора перед отправкой не работает - PullRequest
Новая
       1

Js форма валидатора перед отправкой не работает

0 голосов
/ 23 марта 2020

У меня проблема с проверкой формы в js. Проверка работает, потому что он показывает мне, является ли поле ввода пустым или с ошибками. Проблема в том, что я не могу сделать отправку, как js остановить отправку, вместо этого все поля ввода корректируются. Я не знаю, почему я не могу отправить заявку, все поля зеленые, потому что они правильные, но я не могу сделать отправку. Пожалуйста, помогите мне, я думаю, что проблема в e.preventdefault (); линия

вот мой js код 

$(document).ready(function() {
    const form = document.getElementById('form');
    const username = document.getElementById('username');
    const email = document.getElementById('email');
    const password = document.getElementById('password');
    const password2 = document.getElementById('password2');

    form.addEventListener('submit', e => {
        e.preventDefault();
        checkInputs();
    });
});

function checkInputs() {
    // trim to remove the whitespaces
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if(usernameValue === '') {
        setErrorFor(username, 'Inserisci un username');
    } else {
        setSuccessFor(username);
    }

    if(emailValue === '') {
        setErrorFor(email, 'Inserisci una e-mail');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, 'E-mail non valida');
    } else {
        setSuccessFor(email);
    }

    if(passwordValue === '') {
        setErrorFor(password, 'Inserisci una password');
    } else {
        setSuccessFor(password);
    }

    if(password2Value === '') {
        setErrorFor(password2, 'Conferma la password');
    } else if(passwordValue !== password2Value) {
        setErrorFor(password2, 'Le password non corrispondono');
    } else{
        setSuccessFor(password2);
    }
}

function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    formControl.className = 'form-control error';
    small.innerText = message;
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}

function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

вот html

<!DOCTYPE HTML>
<html>
    <head>
        <?php include("top.php");?>
        <link href="style/index.css" type="text/css" rel="stylesheet"> 
        <script src="js/script1.js"  type="text/javascript"></script>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h2>Registrati</h2>
            </div>
            <form id="form" class="form" action="usr/signup_submit.php" method="post">
                <div class="form-control">
                    <label for="username">Username</label>
                    <input type="text" name="username" placeholder="Username" id="username">
                    <small>Error message</small>
                </div>
                <div class="form-control">
                    <label for="username">Email</label>
                    <input type="email" name="email" placeholder="E-mail" id="email">
                    <small>Error message</small>
                </div>
                <div class="form-control">
                    <label for="username">Password</label>
                    <input type="password" name="password" placeholder="Password" id="password">
                    <small>Error message</small>
                </div>
                <div class="form-control">
                    <label for="username">Conferma password</label>
                    <input type="password" name="password2" placeholder="Conferma password" id="password2">
                    <small>Error message</small>
                </div>
                <div><input type="submit" value="Registrati"></div>
                <div id = "reg">Hai un account? <a href = "index.php">Accedi</a></div>
            </form>
        </div>
    </body>
</html>

Ответы [ 3 ]

0 голосов
/ 23 марта 2020

Вы правы, что это e.preventDefault(). После того, как вы закончите sh checkInputs(), и если он пройдет, вам нужно form.submit()

0 голосов
/ 23 марта 2020

Добавьте статус в вашу функцию «checkInputs» и измените его значение на «true» или «false» на основе проверок, которые вы проверяете. 

$(document).ready(function() {
    const form = document.getElementById('form');
    const username = document.getElementById('username');
    const email = document.getElementById('email');
    const password = document.getElementById('password');
    const password2 = document.getElementById('password2');

    form.addEventListener('submit', e => {
        if(!checkInputs()){
          e.preventDefault();
        }
    });
});

function checkInputs() {
    // trim to remove the whitespaces
    let status = false;        //Add status default false
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if(usernameValue === '') {
       status = setErrorFor(username, 'Inserisci un username');
                                 //if not validating then "false"
    } else {
       status =  setSuccessFor(username);
           //if validating then "true"
    }

    if(emailValue === '') {
       status =  setErrorFor(email, 'Inserisci una e-mail');

    } else if (!isEmail(emailValue)) {
       status =  setErrorFor(email, 'E-mail non valida');

    } else {
       status =  setSuccessFor(email);

    }

    if(passwordValue === '') {
       status =  setErrorFor(password, 'Inserisci una password');

    } else {
       status =  setSuccessFor(password);

    }

    if(password2Value === '') {
      status =   setErrorFor(password2, 'Conferma la password');


    } else if(passwordValue !== password2Value) {
      status =   setErrorFor(password2, 'Le password non corrispondono');

    } else{
       status =  setSuccessFor(password2);

    }
    return status;
}

function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    formControl.className = 'form-control error';
    small.innerText = message;
    return false;
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
    return true;
}

function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

Проверьте это рабочий пример

0 голосов
/ 23 марта 2020

Это верно. Поведение по умолчанию для события submit - отправка формы. Попробуйте использовать переменную для хранения возможных ошибок, таких как let errorExists = false;, затем, если какая-либо ошибка найдена, измените ее значение на true и, в конце проверки, используйте 

if(errorExists){
    e.preventDefault();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...