Как проверить несколько функций перед отправкой? - PullRequest
Новая
       11

Как проверить несколько функций перед отправкой?

0 голосов
/ 15 марта 2019

Итак, я пытаюсь проверить форму, и когда я запускаю свой код, проверка работает и отображает значения функций, но сразу исчезает. Что я делаю неправильно? Как я могу получить его для проверки сначала перед отправкой?

HTML: 

<form name="myForm" id="form" action="#" onsubmit="validateForm()" method="POST">

   <div class="form-group">
      <label id="first" for="firstName">First Name:</label>
      <input id="firstName" name="fname" class="form-control" type="text" placeholder="John"/>
   </div>
   <div class="form-group">
      <label id="emails" for="email">Email: </label>
      <input id="email" name="email" class="form-control" type="email" placeholder="email@domain.com"/>
      </div>
   <div class="form-group">
      <label id="address1" for="street">Street Address:</label>
      <input id="street" name="street" class="form-control" type="text" placeholder="123 Lane Street"/>
   </div>
   <input type="submit" value="Submit Button">
 </form>

Файл JavaScript: 

function validateForm() {
   var nameValid = validateName();
   var addressValid = validateAddress1()
   var emailValid = validateEmail();

function validateName() {
    var name = document.forms["myForm"]["fname"].value;;
    if (name == null || name == "") {
        document.getElementById('first').style.color = "Red";
        document.getElementById('first').innerHTML = "First Name *Required";
        document.getElementById('firstName').style.f = "Red";
        return false;
    }
}

function validateAddress1() {
    var address = document.forms["myForm"]["street"].value;
    if (address == null || address == "") {
        document.getElementById('address1').style.color = "Red";
        document.getElementById('address1').innerHTML = "Street Address *Required";
        document.getElementById('street').style.f = "Red";
        return false;
    }
}

function validateEmail() {
    var email = document.forms["myForm"]["email"].value;
    if (email == null || email == "") {
        document.getElementById('emails').style.color = "Red";
        document.getElementById('emails').innerHTML = "Email *Required";
        document.getElementById('email').style.f = "Red";
        return false;
    }
}
};

1 Ответ

0 голосов
/ 15 марта 2019

Сначала удалите поведение по умолчанию при отправке формы. Добавьте event в качестве параметра к функции, а затем event.preventDefault();

Затем измените функции так, чтобы они возвращали true, если входные данные верны, и false, если они не верны.

Затем проверьте, возвращает ли хотя бы один из методов false, если да, вернитесь оттуда.

Пожалуйста, посмотрите на этот пример 

function validateForm(event) {
    event.preventDefault();
    var nameValid = validateName();
    var addressValid = validateAddress1()
    var emailValid = validateEmail();

    if (!nameValid || !addressValid || !emailValid) {

        return;
    }

    // programatically submit the form > event.target.submit();
    event.target.submit();
}

function validateName() {
    var name = document.forms["myForm"]["fname"].value;;
    if (name == null || name == "") {
        document.getElementById('first').style.color = "Red";
        document.getElementById('first').innerHTML = "First Name *Required";
        document.getElementById('firstName').style.f = "Red";
        return false;
    }

    document.getElementById('first').style.color = 'black';
    document.getElementById('first').innerHTML = 'First Name';

    return true;
}

function validateAddress1() {
    var address = document.forms["myForm"]["street"].value;
    if (address == null || address == "") {
        document.getElementById('address1').style.color = "Red";
        document.getElementById('address1').innerHTML = "Street Address *Required";
        document.getElementById('street').style.f = "Red";
        return false;
    }

    document.getElementById('address1').style.color = 'black';
    document.getElementById('address1').innerHTML = 'Street Address:';

    return true;
}

function validateEmail() {
    var email = document.forms["myForm"]["email"].value;
    if (email == null || email == "") {
        document.getElementById('emails').style.color = "Red";
        document.getElementById('emails').innerHTML = "Email *Required";
        document.getElementById('email').style.f = "Red";
        return false;
    }

    document.getElementById('emails').style.color = 'black';
    document.getElementById('emails').innerHTML = 'Email:';

    return true;
}
<form name="myForm" id="form" action="#" onsubmit="validateForm(event)" method="POST">
    <div class="form-group">
        <label id="first" for="firstName">First Name:</label>
        <input id="firstName" name="fname" class="form-control" type="text" placeholder="John" />
    </div>
    <div class="form-group">
        <label id="emails" for="email">Email: </label>
        <input id="email" name="email" class="form-control" type="email" placeholder="email@domain.com" />
    </div>
    <div class="form-group">
        <label id="address1" for="street">Street Address:</label>
        <input id="street" name="street" class="form-control" type="text" placeholder="123 Lane Street" />
    </div>
    <input type="submit" value="Submit Button">
</form>

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

Наконец, этот способ проверки может быть улучшен. Я попытаюсь привести пример

...