Не могу использовать 2 функции формы JavaScript одновременно

Question

Итак, я сделал 2 функции в JavaScript.одна функция состоит в том, чтобы проверить, заполнен ли какой-то обязательный ввод в форме. Если обязательный не заполнен, я хочу, чтобы на странице было указано, что ввод пуст.

Это функция, которую я сделал в Javascript:

function checkform(form) {
            //Krijg all het input van de ingevulde form
            var inputs = form.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if(inputs[i].hasAttribute("required")){
                    if(inputs[i].value == ""){
                        // Als er een leegveld is meld deze alert code:
                        alert("Vul alle vereisten velden in");
                        return false;
                    }
                }
            }

            return true;
        }

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

function alertpopup()
        {
            alert("Uw email is verzonden! U krijgt binnen 24 uur bericht van ons.")
        }

Теперь дело в том, что оба работают, но не одновременновремя.Если я удаляю функцию alertpopup, функция checkform работает, когда обязательное поле пусто, но когда я использую функцию alertpopup, при отправке формы появляется только всплывающее окно, но функция checkform не показывает никаких сообщений, когдаОбязательное поле не заполнено.

Это моя форма в HTML:

<form action="" id="form" onsubmit="return checkform(this)">

    <label for="naam"><strong>Naam*</strong></label><br>
    <input type="text" id="naam" name="naam" value="Tom" required/>
    <br><br>
    <label for="email"><strong>Email*</strong></label><br>
    <input type="text" id="email" name="email" value="tom@gmail.com" required/>
    <br><br>
    <label for="telefoonnummer"><strong>Telefoonnummer</strong></label><br>
    <input type="text" id="telefoonnummer" name="telefoonnummer" value="020-694-0232" readonly="readonly"/>
    <br><br>
    <label for="textarea"><strong>Uw vraag</strong></label><br>
    <textarea id="textarea" type="textarea" rows="10" cols="50" value="Hoe kan ik een vluchtnummer toevoegen?"required/></textarea>

    <br><br>
    <input type="submit" value="Versturen" onclick="alertpopup()">
</form>

Итак, как мне заставить всплывающее окно высевать, когда пользователь нажимает кнопку отправки и когдавсе необходимые поля заполнены?

Answer 1

Вы можете использовать функцию отправки jQuery, например:

$( "#form" ).submit(function( event ) {
    var isvalid=checkform();
    if(!isvalid){
     alertpopup();
     event.preventDefault();
    } 
 });

Документация jQuery ссылка

Answer 2

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

Просто поместите ее в метод onsubmit в конце, если формаверно.как это:

function submitForm(form) {
  if(checkform(form)) {
    // send form code
    alert('form was sent')
  }
}

Answer 3

Попробуйте создать другую функцию, которая объединит все ваше поведение в одно:

function checkFormAndAlert(form) {
   const formIsValid = checkform(form);
   if (formIsValid) {
     alertpopup();
   }
   // Here you can put 'else' conditions.
}

Я бы также предложил два улучшения: нехорошо смешивать обязанности (а ваша checkform функция имеет alertвнутри. Попробуйте параметризовать функцию popupalert, чтобы передать оповещение внутрь, а затем сделать следующее:

if (formIsValid) {
   alertpopup('Correct form message');
} else {
   alertpopup('Incorrect form message');
}

Это должно помочь вам начать работу и станет хорошей отправной точкой:)

Answer 4

Если вы хотите, чтобы alertpopup () вызывал даже пустые входы, вы можете вызвать его до возврата false;а также.

function checkform(form) {
            //Krijg all het input van de ingevulde form
            var inputs = form.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if(inputs[i].hasAttribute("required")){
                    if(inputs[i].value == ""){
                        // Als er een leegveld is meld deze alert code:
                        alert("Vul alle vereisten velden in");

                        return false;
                    }
                }
            }
alertpopup();
            return true;

        }