尝试验证表单客户端和服务器端

Question

客户端验证看起来像这样：

function validateFname() {
    var x = document.getElementById('fname').value; 
    if (x==null || x=="")
    {
    alert("First name must be filled out");
    return false;
    }
}

它下面的服务器端：

if(isset($_POST['SubmitForm'])){
if(empty($_POST['fname'])){
    echo "First name cannot be empty!<br/><br/>";
    return false;
}

以及下面的表格：

<form name = 'checkout' method='post' action="<?php echo $_SERVER['PHP_SELF']; ?>"
accept-charset='UTF-8'>
First Name:<input type="text" name="fname" id="fname" onsubmit="return validateFname()"
class="required" value="<?php echo $fname;?>" />
<input type="submit" name="SubmitForm" value="Send"/>

当然，它还有很多其他功能，但上面仅举了一个例子。 我试图弄清楚为什么（clientside）javascript函数无法正常工作，而出现（server）php错误。 我需要能够让客户端在服务器之前运行验证检查以减少负载。

Answer 1

onsubmit是属于<form>元素的事件。 您已将其放置在“提交”按钮上，该按钮将不起作用。

这是一个工作的小提琴：

演示

参考

Answer 2

<form name = 'checkout' method='post' action="<?php echo $_SERVER['PHP_SELF']; ?>" accept-charset='UTF-8'>
First Name:<input type="text" name="fname" id="fname"  value="<?php echo $fname;?>" />
<input type="submit" name="SubmitForm" onClick="return validateFname()"  value="Send"/>
</form>

试试上面的代码。 不用在输入文本字段中使用onSubmit，而是在提交按钮中使用onClick。 祝好运