0

我正在尝试解决我在让简单的表单验证工作时遇到的一些难题。我知道我遗漏了一些非常微不足道的东西，但没有网络开发经验来发现它。主要用于以下 PHP 源代码：

<?php
if(!$_POST)
{
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="example.js"></script>       
    </head>
    <body>
        <script>
            $(document).ready(function(){
                $("#b1").click(function(){
                    $("#div1").hide("slow");
                    $("#div2").hide("slow");
                });
                $("#b2").click(function(){
                    $("#div1").show("slow");
                    $("#div2").show("slow");
                });
            });         
        </script>           

        <p>My Form!</p>
        <form name="sampleform" action="myform_example.php" onsubmit="return DoNotAllowEmptyText();" method="post">
            <div id="div1">  
                <p>
                    Text Field:
                    <input type="text" name="textfield" value="" />
                </p>
                <p>
                    Number Field:
                    <input type="number" name="numfield" min="1" max="99" value="1" />
                </p>
            </div>
            <p>
                Show/Hide Buttons:
                <button id="b1" onclick="return false">Hide</button>
                <button id="b2" onclick="return false">Show</button>
            </p>
            <div id="div2">
                <p>
                    Checkbox:
                    <input type="checkbox" name="cbfield" />
                </p>
                <p>
                    Pulldown:
                    <select name="pulldown">
                        <option value="0" selected="selected">Zero</option>
                        <option value="1">One</option>
                    </select>       
                </p>            
                <p>
                    <input type="submit" name="sampleform" value="Submit" />
                </p>
            </div>
        </form>
    </body>
</html>

<?php
}
else if($_POST['sampleform'] == "Submit")
{
echo "Text Field: ".$_POST['textfield']."<br>";
echo "Number Field: ".$_POST['numfield']."<br>";
echo "Checkbox Field: ".$_POST['cbfield']."<br>";
echo "Pulldown Field: ".$_POST['pulldown']."<br>";
}
?>

这里是相关的 JavaScript 文件（example.js）：

function DoNotAllowEmptyText()
{
alert("Called!!");

var theField = document.forms["sampleform"]["textfield"].value;

if(theField == null || theField == "")
{
    alert("Please enter some text.");
    return false;
}
}

如果我将文本字段留空，我会期望

DoNotAllowEmptyText()

由于 PHP 文件中的下一行代码而被调用，但这不是因为函数调用中没有显示警报

<form name="sampleform" action="myform_example.php" onsubmit="return DoNotAllowEmptyText();" method="post">

但是该函数没有被调用。是否与提交按钮有关，导致页面在 JavaScript 执行之前离开？我怎样才能解决这个问题？

谢谢你。

4

1 回答 1

0

ah. you have to the jquery's preventDefault.

use this function instead.

$(document).ready(function() {
    $('input:submit[name=sampleform]').click(function(e) {
        var txt = $('input:text[name=textfield]').val();
        var num = $('input[type=number][name=numfield]').val();
        if(num == '' || txt == '')
            {
            alert('fill up the empty fields!');
            return e.preventDefault();
            }

    });


});

This the edited version of your function using preventDefault. Hope it works.

function DoNotAllowEmptyText(e)
{
    var theField = document.forms["sampleform"]["textfield"].value;

    if(theField == null || theField == "")
    {
    alert("Please enter some text.");
    return e.preventDefault();
    }
}
于 2013-08-25T17:49:25.453 回答