在提交表单之前检查了条款和条件

时间:2016-04-09 08:04:38

标签: javascript php jquery forms

如果用户想要提交表单,他们必须先检查terma和条件框。 那么我应该在哪里添加代码?

<?php
// Start the session
session_start();
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="form1.css"/>
</head>
<body onload="disableSubmit()">

<?php 

//define variable and set to empty value

$forenameErr = $surnameErr = $emailErr = $postalAddressErr = $landLineTelNoErr = $mobileTelNoErr = $sendMethodErr = "";
$valid = true;

// if forename is null , make it null , else test_input()
$forename = empty($_POST["forename"]) ? NULL : test_input($_POST["forename"]);

// if surname is null , make it null , else test_input()
$surname =  empty($_POST["surname"]) ? NULL : test_input($_POST["surname"]);

// if postalAddress is null , make it null , else test_input()
$postalAddress = empty($_POST["postalAddress"]) ? NULL : test_input($_POST["postalAddress"]);

// if landLineTelNo is null , make it null , else test_input()
$landLineTelNo = empty($_POST["landLineTelNo"]) ? NULL : test_input($_POST["landLineTelNo"]);

// if mobileTelNo is null , make it null , else test_input()
$mobileTelNo = empty($_POST["mobileTelNo"]) ? NULL : test_input($_POST["mobileTelNo"]);

//email
$email = empty($_POST["email"]) ? NULL : test_input($_POST["email"]);

// if sendMethod is null , make it null , else test_input()
$sendMethod = empty($_POST["sendMethod"]) ? NULL : test_input($_POST["sendMethod"]);

    if  (isset($_POST["submit"])){


        //check forename
        if($forename === NULL)  {
            //forename is empty
            $forenameErr = "*Forename is required";
            $valid = false;

        } else {
            //check characters
             if (!preg_match("/^[a-zA-Z ]*$/",$forename)) {
                 $forenameErr = "Only letters and white space allowed";
                 $valid = false;
             }
        }

        //check surname
        if($surname === NULL){
            //surname is empty
            $surnameErr = "*Surname is required";
             $valid = false; //false

        } else {
            //check charaters
             if (!preg_match("/^[a-zA-Z ]*$/",$surname)) {
             $surnameErr = "*Only letters and white space allowed";
             $valid = false;
            }
        }   

         //check address
         if (!preg_match("/^[a-zA-Z0-9\-\\,. ]*$/", $postalAddress)) {
                     // check characters
                     $postalAddressErr = "*Invalid Postal Address";
                     $valid = false;//false
        }


            // check if invalid telephone number added
            if (!preg_match("/^$|^[0-9]{12}$/",$landLineTelNo)) {
                //check number
                     $landLineTelNoErr = "*Only 12 digit number can be entered";
                     $valid = false;//false
            }


            //check valid mobiel tel no
            if (!preg_match("/^$|^[0-9]{11}$/",$mobileTelNo)) {
                //check number
                     $mobileTelNoErr = "*Only 11 digit number can be entered";
                     $valid = false;//false
            }


        //check valid email
            if (isset($email) && !filter_var($email, FILTER_VALIDATE_EMAIL)) 
            { $emailErr = "*Invalid email format"; 
                 $valid = false;//false
             }


        //check sendMethod
        if($sendMethod === NULL){
             //send method is empty
             $sendMethodErr = "*Contact method is required";
             $valid = false; //false
        } else {
            $sendMethod = test_input($_POST["sendMethod"]);
        }

        //sendmethod link to information filled
        if (isset($sendMethod) && $sendMethod=="email" && $email ==NULL){
            $emailErr ="*Email is required ";
            $valid = false;
        }

        if (isset($sendMethod) && $sendMethod=="post" && $postalAddress ==NULL){
            $postalAddressErr ="*Postal Address is required ";
            $valid = false;
        }

        if (isset($sendMethod) && $sendMethod=="SMS" && $mobileTelNo ==NULL){
            $mobileTelNoErr ="*Mobile number is required ";
            $valid = false;
        }


     //if valid then redirect
    if($valid){

         $_SESSION['forename'] = $forename;
         $_SESSION['surname'] = $surname;
         $_SESSION['email'] = $email;
         $_SESSION['postalAddress'] = $postalAddress;
         $_SESSION['landLineTelNo'] = $landLineTelNo;
         $_SESSION['mobileTelNo'] = $mobileTelNo;
         $_SESSION['sendMethod'] = $sendMethod;

         header('Location: userdetail.php');
         exit();
        }    

    }   else{
         //user did not submit form!
    }




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

?>

<div id="wrapper">

<h1>Welcome to Chollerton Tearoom! </h1>

<nav> 
    <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="findoutmore.html">Find out more</a></li>
         <li><a href="offer.html">Offer</a></li>
         <li><a href="credit.html">Credit</a></li>
         <li><a href="#">Admin</a></li>
         <li><a href="wireframe.html">WireFrame</a></li>
    </ul>
</nav>

<form id = "userdetail" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">

    <fieldset id="aboutyou">
    <legend id="legendauto">user information</legend>

        <p>
        <label for="forename">Forename: </label>
        <input type="text" name="forename" id="forename" value="<?php echo $forename;?>">
        <span class="error"> <?php echo $forenameErr;?></span>
        </p>

        <p>
        <label for="surname">Surname:</label>
        <input type="text" name="surname" id="surname" value="<?php echo $surname;?>">
        <span class="error"> <?php echo $surnameErr;?></span>
        </p>

        <p>
        <label for="postalAddress">Postal Address:</label>
        <input type="text" name="postalAddress" id="postalAddress" value="<?php echo $postalAddress;?>">
        <span class="error"> <?php echo $postalAddressErr;?></span>
        </p>

        <p>
        <label for="landLineTelNo">Landline Telephone Number:</label>
        <input type="text" name="landLineTelNo" id="landLineTelNo" value="<?php echo $landLineTelNo;?>" >
        <span class="error">  <?php echo $landLineTelNoErr;?></span>
        </p>

        <p>
        <label for="mobileTelNo">Moblie:</label>
        <input type="text" name="mobileTelNo" id="mobileTelNo" value="<?php echo $mobileTelNo;?>" >
        <span class="error">  <?php echo $mobileTelNoErr;?></span>
        </p>

        <p>
        <label for="email">E-mail:</label>
        <input type="text" name="email" id="email" value="<?php echo $email;?>">
        <span class="error"> </span> <?php echo $emailErr;?> </span>
        </p>

        <fieldset id="future">
        <legend>Lastest news</legend>

        <p>
        Choose the method you recommanded to recevive the lastest information
        </p>
        <br>
        <input type="radio" name="sendMethod" id="sendMethod" <?php if (isset($sendMethod) && $sendMethod=="email") echo "checked";?>  value="email">
        Email
        <input type="radio" name="sendMethod" id="sendMethod" <?php if (isset($sendMethod) && $sendMethod=="post") echo "checked";?>  value="post">
        Post
        <input type="radio" name="sendMethod" id="sendMethod" <?php if (isset($sendMethod) && $sendMethod=="SMS") echo "checked";?>  value="SMS">
        SMS
        <span class="error"> <?php echo $sendMethodErr;?></span>
        </fieldset>

       <p><span class="error">* required field.</span></p>




         <input type="checkbox" name="terms" id="terms">
         I have read and agree to the Terms and Conditions and Privacy Policy  
         <br><br>
         <p>
         <input type="submit" name="submit" value="submit"  />
         </p>
         </form>




        </form>

       </fieldset>
    </form>

</div>



</body>
</html>

所以这是我的userdetail.php来获取用户数据......

<?php 

session_start();

$forename = $_SESSION['forename'];
$surname = $_SESSION['surname'];
$email = $_SESSION['email'];
$postalAddress = $_SESSION['postalAddress'];
$landLineTelNo = $_SESSION['landLineTelNo'];
$mobileTelNo = $_SESSION['mobileTelNo'];
$sendMethod = $_SESSION['sendMethod'];

echo "<h1>Successfull submission :</h1>";
echo "<p>Forename :  $forename <p/>";
echo "<p>Surname : $surname <p/>";


if($_SESSION['postalAddress']==NULL)
{echo "<p>postalAddress:NULL</p>";} 
else {echo "<p>PostalAddress : $postalAddress </p>";}

if($_SESSION['email']==NULL)
{echo "<p>email:NULL<p/>";} 
else {echo "<p>email : $email</p>";}

if($_SESSION['landLineTelNo']==NULL)
{echo "<p>landLineTelNo:NULL<p/>";} 
else {echo "<p>landLineTelNo : $landLineTelNo </p>";}

if($_SESSION['mobileTelNo']==NULL)
{echo "<p>mobileTelNo:NULL<p/>";} 
else {echo "<p>mobileTelNo : $mobileTelNo </p>";}


echo "<p>sendMethod : $sendMethod </p>";

?>

我需要检查术语和条件复选框,否则使用无法提交表单....

4 个答案:

答案 0 :(得分:2)

记住! 使用javascript只会让用户轻松。它可以防止加载其他页面以显示错误。 STILL 如果浏览器已启用javascript,则会通过已检查的条款,甚至不会检查它。所以你应该 始终 检查服务器端(PHP)并使用javascript让用户轻松。

HTML中的

<form id="userdetail" ....>
    ...
    <input type="checkbox" name="terms" id="terms" value="accepted" />
    ...
</form>

然后在你的javascript:

  1. 纯JS:

    document.getElementById('userdetail').addEventListener('submit', function(event){
        if(document.getElementById('terms').checked == false){
            event.preventDefault();
            alert("By signing up, you must accept our terms and conditions!");
            return false;
        }
    });
    
  2. 使用JQuery(jquery.com)

    $('#userdetail').submit(function(event){
        if($('#terms').is(':checked') == false){
            event.preventDefault();
            alert("By signing up, you must accept our terms and conditions!");
            return false;
        }
    });
    
  3. 并在您的PHP中检查是否已选中,您应该使用

    if(isset($_POST['terms']) && $_POST['terms'] == 'accepted') {
        // Continue Registring 
    } else {
        // Display Error
    }
    

答案 1 :(得分:0)

而不是提交你:

    <input type="button" onclick="javascript:myFunction()" Value="Submit">

然后是javascript函数:

function myFunction() {
    if(document.getElementById("terms").checked == true){
        document.getElementById("userdetail").submit();
    }
    else{
        alert("You have to agree on terms and conditions");
    }
}

答案 2 :(得分:0)

在Jquery中你可以这样做:

apply_async

答案 3 :(得分:0)

用答案中的给定html替换html的部分,并将下面的函数添加到脚本中......

&#13;
&#13;
function verify_terms()
{
   if (!$('#terms').is(':checked'))
   {
     alert('Please agree terms and conditions');
     return false;
   }
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<input type="checkbox" name="terms" id="terms">
I have read and agree to the Terms and Conditions and Privacy Policy  
<br><br>
<p>
<input type="submit" name="submit" onclick="return verify_terms();" value="submit"  />
&#13;
&#13;
&#13;