验证HTML联系表单

时间:2013-08-30 14:30:10

标签: php javascript html validation contact-form

我有一个HTML联系表单,我需要以某种方式进行验证。

如果没有填写任何字段,我不想在JavaScript中提醒用户,而是选择在空白的字段下方显示“Field Required”字样。

以下是我的联系表单contact.html

<form id = "myForm" action="contact.php" method="post">

<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />


<label for="name">Email:</label>
<input type="text" name="email" id="email" value="" tabindex="1" />


<input type="submit" value="Submit" class="button" />
</form>

这是我的PHP表单contact.php(除了验证之外的所有内容都省略了):

//Validation... I am building up an error message string to alert the user at the end (omitted) 

$errormessage = '';

if(!isset($_POST['name']) || strlen($_POST['name']) < 1){
$errormessage .= 'You have not entered your Name\n';
}

if(!isset($_POST['email']) || strlen($_POST['email']) < 1){
$errormessage .= 'You have not entered your Email Address\n';
}

if($errormessage != ''){ ?>

<script language="javascript" type="text/javascript">
    alert('<?php echo "$errormessage" ?>');
    window.location = 'contact.html';
</script>

<?php } 


else {

$mail_to = 'info@email.co.uk';
$subject = 'Message from a site visitor '.$field_name;

$body_message = 'From: '.$field_name."\n\n";
$body_message .= 'E-mail: '.$field_email."\n\n";



$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

}

正如您所看到的,我当前的验证在PHP中构建了一个字符串,最后会向用户发出警告(省略)但是我想通过在HTML字段下面显示字符串'Field Required'来替换此方法这是空的。

2 个答案:

答案 0 :(得分:2)

如果你可以使用某些html5功能,另一个选择是在输入上设置所需的属性。

  

需要

     

此属性指定用户必须在提交表单之前填写值。当type属性为hidden,image或按钮类型(提交,重置或按钮)时,无法使用它。 :optional和:必需的CSS伪类将适用于该字段。

取自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

所以你的html会变成:

<form id = "myForm" action="contact.php" method="post">

<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" tabindex="1" required />


<label for="name">Email:</label>
<input type="text" name="email" id="email" value="" tabindex="1" required />


<input type="submit" value="Submit" class="button" />
</form>

答案 1 :(得分:1)

我想在不背离您的方法的情况下回答您的问题。

如果可以通过php解析contact.html,或者只是将其更改为contactform.php,则可以向其发送一个查询字符串,指示哪些字段有错误并在其下方显示消息。

<强> contactform.php

<form id = "myForm" action="contact.php" method="post">

<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
<?php if (isset($_GET['name']) && $_GET['name'] == 1) { 
    echo '<br/>This field is required.'; 
} ?>


<label for="name">Email:</label>
<input type="text" name="email" id="email" value="" tabindex="1" />
<?php if (isset($_GET['email']) && $_GET['email'] == 1) { 
    echo '<br/>This field is required.'; 
} ?>

<强> contact.php

$error = FALSE;

$errors = array();

if(!isset($_POST['name']) || strlen($_POST['name']) < 1){
    $error = TRUE;
    $errors[] = 'name=1';
}

if(!isset($_POST['email']) || strlen($_POST['email']) < 1){
    $error = TRUE;
    $errors[] = 'email=1';
}

$geterrors = (count($errors) > 1 ? implode('&',$errors) : $errors[0]);

if($error){ ?>

<script language="javascript" type="text/javascript">
    window.location = 'contactform.php?<?php echo $geterrors; ?>';
</script>

...