即使验证失败,表单也会提交

Question

下面是一个简单的html表单和javascript代码的代码,用于在用户单击提交按钮时检查字段是否为空.

问题是,表单已提交,即使没有填写必要的字段.正如您所看到的,我只是一个JS编码的初学者,所以我不知道,如果问题出在if/else语句中,JS代码中的其他地方,或者表单没有正确设置.

<script>
    function preveri(pov){
        var preveriime = pov.ime.value;
        var preverirojstvo = pov.rojstvo.value;
        var preverimail = pov.email.value;
        var preverikategorijo = pov.kategorija.value;

        if (preveriime == "") {
            document.getElementById('imeA').style.display="block";                                            
        }                                    
        if (preverirojstvo == "") {
            document.getElementById('datumA').style.display="block";
        }   
        if (preverimail == "") {
            document.getElementById('emailA').style.display="block";
        }   
        if (preverikategorijo == "") {
            document.getElementById('kategorijaA').style.display="block";
        }   

        if(preveriime != "" && preverirojstvo != "" && preverimail != "" && preverikategorijo != ""){                                                                              
            document.pov.submit();
        }
        else{
            return false;
        }
    }

</script>  

<h4>OBRAZEC ZA SPLETNE PRIJAVE</h4>
<br/>
<form name="pov" method="POST" action="thankUPage.php">
    <input name="ime" type="text" placeholder="Ime in Priimek"></input>
    <input name="rojstvo" type="text" placeholder="Datum rojstva"></input>
    <input name="email" type="text" placeholder="E-pošta"></input>
    <input name="kategorija" type="text" placeholder="Kategorija"></input>
    <textarea name="povprasaj" placeholder="Povprašaj"></textarea>
    <input type="submit" name="submit" id="submit" value="Pošlji!"  onclick="preveri(pov)" />
</form>
<div id="imeA" class="imeA">Obvezno polje!</div>
<div id="datumA" class="datumA">Obvezno polje!</div>
<div id="emailA" class="emailA">Obvezno polje!</div>
<div id="kategorijaA" class="kategorijaA">Obvezno polje!</div>
</div>

Tnx提前!

Answer 1

您在click事件上返回false.您需要将回调函数绑定到表单的提交事件,因此返回false将取消表单的提交.

在表单字段中按"enter"将提交表单,并且可能不会在提交按钮上触发click事件.

<form name="pov" method="POST" action="thankUPage.php" onsubmit="return preveri(this);" >