我在下面有一个表格，我想根据不同的东西使某些字段成为必填字段。
-
我希望以下字段是一个简单的必填字段，如果未填写，则带有弹出警报：
- 名字
- 电子邮件
-
我希望在勾选电话时需要电话字段。
-
如果邮寄被勾选，则需要地址。
如果缺少内容，我如何使警报弹出，但如果一切正常，则发送表单？
<div id="contactform">
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'white'
};
</script>
<form class="form" method="POST" action="<?php the_permalink(); ?>" onsubmit="return validateCaptcha()">
<input type="hidden" name="valid" value="0" />
<table border="0" style="float:left;" width="490">
<tbody>
<tr>
<td>
<p>Name:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="fullname" id="fullname" /></td>
</tr>
<tr>
<td>
<p>Organisation:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="companyname" id="companyname" /></td>
</tr>
<tr>
<td>
<p>E-mail:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>
<p>Daytime Tel:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="tel" id="tel" /></td>
</tr>
<tr>
<td valign="top">
<p>Contact Method:</p>
</td>
<td> </td>
<td align="left" valign="top">
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Phone" id="phone" />
<label style="margin-right: 25px;">Phone</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Email" id="email" />
<label style="margin-right: 25px;">Email</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Post" id="post" />
<label style="margin-right: 25px;">Post</label>
</p>
</td>
</tr>
<tr>
<td>
<p>Address (if applicable):</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="address" id="address" /></td>
</tr>
<tr>
<td valign="top">
<p>Where did you hear about us?:</p>
</td>
<td> </td>
<td align="left" valign="top">
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Search Engine" id="search" />
<label style="margin-right: 25px;">Search Engine</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="NPA" id="NPA" />
<label style="margin-right: 25px;">NPA</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Advertisement" id="advertisement" />
<label style="margin-right: 25px;">Advertisement</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Brochure" id="brochure" />
<label style="margin-right: 25px;">Brochure</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Show" id="show" />
<label style="margin-right: 25px;">Show</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Other" id="other" />
<label style="margin-right: 25px;">Other</label>
</p>
</td>
</tr>
<tr>
<td>
<p>Please Specify:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="specify" id="specify" /></td>
</tr>
</tbody>
</table>
<table border="0" style="float:left;margin-left:146px;" width="490">
<tbody>
<tr>
<td> </td>
<td>
<script type="text/javascript">
function validateCaptcha()
{
if ($('input[name="valid"]')) return true;
if ($('input[name="recaptcha_response_field"]').val() == "")
{
alert("Please complete the CAPTCHA field.");
return false
}
$.ajax({
url: "http://www.medilogicuk.com/wp-content/themes/default/verify.php",
type: "POST",
async:"false",
data: {
recaptcha_response_field: $('input[name="recaptcha_response_field"]').val(),
recaptcha_challenge_field: $('input[name="recaptcha_challenge_field"]').val()
},
success: function(data){
if (data == "OK")
{
$('input[name="valid"]').val(1);
$('.form').submit();
}
else
{
alert(data);
}
},
error: function(){
alert("An error occured, please try again later");
}
});
return false;
};
</script>
<?php require_once('recaptchalib.php');
$publickey = ""; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>
</td>
</tr>
<tr>
<td colspan="2"><button type="submit" name="submit" value="Send message">Send message</button></td>
</tr>
</tbody>
</table>
<? if(isset($_POST['submit'])) {
$to = "rob@domain.com";
$header = 'From: info@domain.com';
$subject = "Website enquiry";
$companyname_field = $_POST['companyname'];
$fullname_field = $_POST['fullname'];
$email_field = $_POST['email'];
$tel_field = $_POST['tel'];
$address_field = $_POST['address'];
$specify_field = $_POST['specify'];
$CheckboxGroup1 = $_POST['CheckboxGroup1'];
$CheckboxGroup2 = $_POST['CheckboxGroup2'];
if( is_array($_POST['CheckboxGroup1']) ){
foreach ($_POST['CheckboxGroup1'] as $val) {
$checkbox1results .= $val.", ";
}
}
if( is_array($_POST['CheckboxGroup2']) ){
foreach ($_POST['CheckboxGroup2'] as $val) {
$checkbox2results .= $val.", ";
}
}
$body = "Hello,'n'n You have an enquiry from the website, please see the details below:'n'n Name: $fullname_field'n Company Name: $companyname_field'n E-Mail: $email_field'n Tel: $tel_field'n Method of contact: $checkbox1results'n Address: $address_field'n Hear about us?: $checkbox2results'n Specify: $specify_field'n'n Please reply to the enquiry asap.'n'n Kind Regards 'n The website";
mail($to, $subject, $body, $header);
echo "</br><p style='"color:#e41770!IMPORTANT;'">Thank you for getting in touch, we will contact you shortly.</p>";
} ?>
</form>
Okie 给你一个快速的例子：
表格
<html>
<body>
<form action="#" method="POST">
<input id="email" type="text" value="" />
<a id="submit" href="#">Submit Form</a>
</form>
</body>
</html>
Jquery部分：
$(document).ready(function(){
$('a#submit').click(function(event){
event.preventDefault();
validateEmail();
})
});
function validateEmail(){
//declarations
rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+'.[a-zA-Z]{2,4}$/;
//check
if ($('input#email').val() === '' || !rule.test($('input#email').val())){
alert ('That is not a Valid Email Address !');
return false;
} else {
alert('validation passed! Submit the form !');
//submit the form action here
}
}
您也可以在这里现场尝试 http://jsfiddle.net/XMbEK/
你已经在代码中得到了答案：
<script type="text/javascript">
function validateCaptcha()
{
if ($('input[name="valid"]')) return true;
if ($('input[name="recaptcha_response_field"]').val() == "")
{
alert("Please complete the CAPTCHA field.");
return false
}
在此之后添加您自己的需求：
if ( phone == 'what it needs to be' )
{
if( email == 'asdasd' ) {
// all is good
} else {
alert( 'need email too' );
}
return true;
}
else
{
alert('Blah blah wrong phone');
return false;
}
等。