使用onclick()事件进行表单验证

时间:2014-03-26 16:55:36

标签: javascript php forms validation

所以我在验证时遇到了一些问题,这些问题存在于我的php动作脚本中。

我有以下表格:

<form action="contact.php" method ="post" enctype="multipart/form-data" id="contact_form" name="contact_form">

<div class="div_input"><input name="name" type="text" value="Name: " class="input4" /></div>
<div class="div_input"><input name="phone" type="text" value="Phone: " class="input4" /></div>
<div class="div_input"><input name="email" type="text" value="E-mail: " class="input4" /></div>
<textarea name="message" cols="0" rows="0" class="textarea2" >Message: </textarea>

然后我使用onclick()方法提交。这就是我相信我的问题所在。

<div class="link4"><span><a href="#" onclick="document.getElementById('contact_form').submit()">send</a></span></div>

<div class="link4"><span><a href="#" onclick="document.getElementById('contact_form').reset()">clear</a></span></div>
</form>

我的剧本......

<?php
$errors = '';
$myemail = 'test@test.com';
$name = $phone = $email = $message ='';
$nameError = $emailError =$phoneError = $messageError = '';

if(empty($_POST['name']))
{$nameError='Name is required!';}
else
{
    $name = test_input($_POST['name']);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$name))
    {
        $nameError='Only letters and white space allowed';
    }
}

if(empty($_POST['email']))
{$emailError='Email is required!';}
else
{
    $email = test_input($_POST['email']);
    //check to make sure is a valid email format
    if(!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email))
    {
        $emailError = "Invalid email format!";
    }
}

if(empty($_POST['phone']))
{
    'Phone number is required';
}
else
{
    $phone = test_input($_POST['phone']);
    //Allow only digits in the phone number
    if(!preg_match("/^[\d\-]+$/",$phone));
    {
        $phoneError = 'Phone must be only numbers and dashes';
    }
}

if (empty($_POST['message']))
{
    $messageError = 'Message is required!';
}
else
{
    $message = test_input($_POST['message']);
}

function test_input($data)
{
     $data = trim($data);
     $data = stripslashes($data);
     $data = htmlspecialchars($data);
     return $data;
}


$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email\n Phone Number: $phone\n Message \n $message";
$headers = "From: $email \r\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
//header('Location: index-5.html');
?>

当我测试时,根本没有验证运行。我可以单击“发送”,表单为空,不会出现错误。

我发现有几个人在他们的php脚本中遇到javascript onclick功能和验证问题。这可能吗?或者我在脚本或表单中遗漏了什么?我想也许我需要在submit()方法之后添加一些javascript。

你们都在想什么?

2 个答案:

答案 0 :(得分:1)

主要问题是您的PHP脚本正在发送消息,无论是否存在错误。

在提交之前,请尝试检查$nameError$emailError$phoneError$messageError是否都为空字符串。

其他建议的改进:

  1. 阅读PHP's filter functions并使用它们代替正则表达式。

  2. 通过在所有输入字段中添加required,在支持HTML5验证的浏览器中利用HTML5验证。

  3. 使用<input type="submit" value="send"><input type="reset" value="clear">代替onclick。他们使用CSS进行风格设计会更加困难,但它对于可访问性更好,即使JavaScript没有用也可以。

答案 1 :(得分:0)

我看到的一件事是

if(empty($_POST['phone']))
{ 
    'Phone number is required';
}

应该是

if(empty($_POST['phone']))
{ 
    $phoneError = 'Phone number is required';
}