不能同时使用 2 javascript 个表单函数

Question

所以我在JavaScript中做了2个函数。一个功能是检查是否填写了表单中的某些必填项。如果未填写必填项，我希望页面显示输入为空。

这是我在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

如果您希望 alertpopup() 调用空输入，那么您可以在 return 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;

        }

Answer 2

Than I also have a function for the button to make an alert that the form was send like this:

如果形式正确，就把它放在最后的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

您可以使用 jQuery 的提交功能 like

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

jQuery 文档 link

不能同时使用 2 javascript 个表单函数

Can't use 2 javascript form functions at the same time

javascript

forms

alert