Question

这是我第三个晚上处理同样的代码......经过几天的谷歌和教程后我就不能理解它了，我已经厌倦了......我现在正在绝望......

总之，我有一个表单，我使用按钮type="button"生成第二个按钮type="submit"。

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

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

我希望显示所有空输入不是逐个突出显示，如果填写了一个输入，则应删除突出显示类。

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

如何达到目的？我对此感到厌倦。谢谢。

LE：通过从函数中删除一些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;

的定位

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
});

我错过了什么？

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

4 个答案: