使用onclick（）函数检查表单无法正常工作

Question

这是我第三天晚上使用相同的代码...经过几天的Google和教程工作后无法正确使用它，我对此感到非常厌倦...我现在迫切希望...

简而言之，我有一个表单，并且使用按钮type="button"生成第二个按钮type="submit" 。

在第二个按钮出现之前，我需要检查所有必需的输入是否为空，并在完成后显示第二个按钮。

我创建了一个混合代码，现在可以验证输入是否为空，并逐个突出显示它们，而不是在我希望的所有输入都同时为空。

我想高亮显示所有空白输入，而不是一一显示，如果填充了一个输入，则应该删除高亮显示类。

到目前为止，我的工作可以在这里找到： 这里最重要的是，我有一个根据输入值进行计算的计算器。 这就是我使用第一个按钮type="button" 。

如何解决这个问题？ 我对此感到非常厌倦。 谢谢。

LE：通过删除一些return false;部分修复它return false; 来自功能的代码。 虽然有一些错误。 例如，如果您完成了最后三个输入而没有完成，而最上面的输入将始终提交。

Answer 1

您可以使用required属性。 由于您没有提交表单，因此不会产生任何影响，但是您可以使用document.querySelectorAll(":required")或jQuery $(":required")选择所有必填字段，然后遍历所有这些字段验证每个。

Answer 2

当值为空时，您将返回false，因此它将停止该函数，这就是为什么它们一个一高亮显示的原因。

Answer 3

您可以使用JS查看此基本验证，并知道该怎么做

<script type="text/javascript">
    function validateMe(){
        var name = document.getElementById('name').value;
        var phone = document.getElementById('phone').value;
        if(name==""){
            //do something
            alert("name can not be null");
            return false;
            //this will not submit your form
        }
        else if(phone==""){
            //do something
            alert("phone can not be null");
            return false;
            //this will not submit your form
        }
        else{
            return true;
            //This will submit your form.
        }
    }
</script>


<form action="somewhere.php" method="post" onsubmit="return validateMe();" >
    <input type="text" name="name" id="name" />
    <input type="text" name="phone" id="phone" />
    <input type="submit" value="check and submit"  />
</form>

注意：这是使用Javascript的非常基本的验证。 您想要单击一个按钮，如果有效，则显示“提交”按钮。 但是，如果只需要验证，为什么要这样做。 为什么有两个按钮一个用来检查值并显示“提交”按钮，另一个按钮是“本身”提交。 为什么？

Answer 4

输入填充后，我创建了另一个短循环函数BUT， newButton按钮不显示。 所有输入从红色变为绿色。 请参见return false;的定位return false;

function validateForm() {
    var elements = document.getElementsByClassName("form-calc");
    for (var i = 0; i < elements.length; i++) {
    if(elements[i].value == "") {
        elements[i].style.borderColor = "red";

    } else {
        elements[i].style.borderColor = "green";
   return false; // IF PUT THIS HERE, ONLY ONE INPUT AT A TIME IS HIGHLIGHTED BUT IN THE END THE newButton WILL POP UP.
    }
    }
     return false; // iF I PUT THIS HERE IT STOPS HERE, NO NEWBUTTON NEXT.
    var newButton = "<input type='submit' name='submit' value='Trimite-mi oferta pe mail' class='buton-calc'/>";
    document.getElementById("a").innerHTML= "<span style='margin-left: 17%;'>Oferta personalizată a fost generată</span>"+newButton;
//SOME CODES HERE
});

我想念什么？