Как убедиться, что все правильно перед отправкой? - PullRequest
Новая
       0

Как убедиться, что все правильно перед отправкой?

1 голос
/ 13 февраля 2020

У меня есть форма HTML5, и я использую javascript для проверки формы.

У меня есть несколько 'if, проверяющих форму, и если они действительны, они меняют переменную (' pass ') на истину или ложь. Они также отображают сообщение об ошибке. Проблема в том, что даже если действительна только одна вещь, она меняет переменную на true, и мне нужно, чтобы она делала pass true, только если все остальное допустимо.

My HTML: 

<!DOCTYPE html>
<html>
<head>
    <title>Register</title>
</head>
<body>
    <div>
        <form name="register" action="register.php" method="POST" >
            <label>First Name:</label>
            <input type="text" id="firstName" name="firstName"><br />
            <label id="warning_first"></label>
            <br />
            <label>Surname:</label>
            <input type="text" id="lastName" name="lastName"><br />
            <label id="warning_second"></label>
            <br />
            <label>Gender:</label>
            <input type="radio" name="gender" value="Male" id="male">Male
            <input type="radio" name="gender" value="Female">Female
            <input type="radio" name="gender" value="Other">Other
            <input type="radio" name="gender" value="Prefer not to say"> Prefer not to say <br />
            <label id="warning_third"></label>
            <br />
            <label>Email:</label>
            <input type="email" id="email" name="email"> <br />
            <label id="warning_fourth"></label>
            <br />
            <label>Confirm Email:</label>
            <input type="email" id="confirmEmail" name="confirmEmail">
            <br />
            <label>Mobile:</label>
            <input type="tel" id="mobileNumber" name="mobileNumber">
            <br />
            <label>Telephone:</label>
            <input type="tel" id="telephoneNumber" name="telephoneNumber">
            <br />
            <input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
            <input type="button" name="submit" value="Register" onclick="submitCheck();">
        </form>
        <script src="script.js"></script>
    </div>
</body>
</html>

My JavaScript: 

function submitCheck() {
    var pass = false;
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var genderTest = document.getElementsByName("gender");
    var genderIf = false;
    for (var a = 0; a < genderTest.length; a += 1) {
        if (genderTest[a].checked) {
            genderIf = true;
        } 
    }
    var emailCheck = document.getElementById("email").value;
    if (firstName.length > 0) {
        document.getElementById("warning_first").innerHTML = "";
        pass = true;
    } else {
        document.getElementById("warning_first").innerHTML = "This is required!";
        pass = false;
    }
    if (lastName.length > 0) {
        document.getElementById("warning_second").innerHTML = "";
        pass = true;
    } else {
        document.getElementById("warning_second").innerHTML = "This is required!";
        pass = false;
    }
    if (genderIf) {
        document.getElementById("warning_third").innerHTML = "";
        pass = true;
    } else {
        document.getElementById("warning_third").innerHTML = "This is required!"
        pass = false;
    }
    if (emailCheck.length > 0) {
        document.getElementById("warning_fourth").innerHTML = "";
        pass = true;
    } else {
        document.getElementById("warning_fourth").innerHTML = "Your email is too short!";
        pass = false;
    }
    if (pass) {
        console.log("OK");
    } else {
        console.log("NO");
    }
}

Как вы можете видеть, если электронная почта верна, консоль выдаст сообщение «ОК» (которое я использую, чтобы убедиться, что все верно). Как можно Я решаю эту проблему так, чтобы она не переходила в истину, если только электронная почта действительна?

Я использую обычную кнопку вместо кнопки отправки из-за проблем с @ onsubmit.

Ответы [ 3 ]

4 голосов
/ 13 февраля 2020

В данный момент вы устанавливаете по умолчанию pass на false и изменяете его на true, если любой элемент проходит тест.

Обратный ход ваших логик c.

Установите значение по умолчанию pass в true. Измените его на false, если любой элемент не пройдет проверку.

1 голос
/ 13 февраля 2020

Все просто, в начале вашего кода измените переменную pass, чтобы она имела значение 1, например: 

var pass = 1;

Теперь измените строку кода в ваших операторах IF, где у вас есть переменная pass. , Для истинного условия, установленного на это: 

pass *= 1;

И для ложного условия на это 

pass *= 0;

Это гарантирует, что до тех пор, пока все условия IF не будут выполнены, ваша переменная прохода не вернет истину состояние.

0 голосов
/ 13 февраля 2020

Вам необходимо создать массив ваших проверочных входов, а затем l oop через ваш массив, прежде чем отправлять запрос Ajax или любое другое действие. Примерно так будет работать нормально: 

var Validations = [
{input:'firstName',isValid:false},
{input:'lastName',isValid:false},
{input:'gender',isValid:false},
{input:'email',isValid:false}
];

Затем, после того, как каждый вход будет изменен и вы проверите его значение, измените свойство isValid его объекта в массиве Validations;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...