0

I have a form below that I want to make certain fields required based on different things.

  1. I want the following fields to be a straight forward required field with a popup alert if they're not filled in:

    • Name
    • Email

  2. I want the phone field to be required if phone is ticked.

  3. Address to be required if post is ticked.

How can I make the alert's pop up if things are missing but if everything is ok then send the form?

<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>&nbsp;</td>
                <td colspan="2"><input type="text" name="fullname" id="fullname" /></td>
            </tr>
            <tr>
                <td>
                <p>Organisation:</p>
                </td>
                <td>&nbsp;</td>
                <td colspan="2"><input type="text" name="companyname" id="companyname" /></td>
            </tr>
            <tr>
                <td>
                <p>E-mail:</p>
                </td>
                <td>&nbsp;</td>
                <td colspan="2"><input type="text" name="email" id="email" /></td>
            </tr>
            <tr>
                <td>
                <p>Daytime Tel:</p>
                </td>
                <td>&nbsp;</td>
                <td colspan="2"><input type="text" name="tel" id="tel" /></td>
            </tr>
            <tr>
                <td valign="top">
                    <p>Contact Method:</p>
                </td>
                <td>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>
4

2 回答 2

0

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/

于 2012-08-14T11:26:21.483 回答
0

您已经在代码中找到了答案：

<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;
}

等等

于 2012-08-14T10:50:20.020 回答