在打开新窗口之前提交按钮检查必填字段

时间:2012-02-27 18:12:51

标签: php forms html5 validation button

我有一个带有必填字段等的HTML 5表单。单击时提交按钮会在提交前检查必填字段。虽然我已经更改了在另一个窗口中打开链接的行为,但我无法让表单检查必填字段并在完成后发送链接。

我需要表单来检查字段是否已填写,然后使用验证和外部链接进行处理,而不是在用户跳过填充时没有打开链接。

我的表格代码如下:

        <?php
        //init variables
        $cf = array();
        $sr = false;

        if(isset($_SESSION['cf_returndata'])){
            $cf = $_SESSION['cf_returndata'];
            $sr = true;
        }
        ?>
        <ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
            <li id="info">There were some problems with your form submission:</li>
            <?php 
            if(isset($cf['errors']) && count($cf['errors']) > 0) :
                foreach($cf['errors'] as $error) :
            ?>
            <li><?php echo $error ?></li>
            <?php
                endforeach;
            endif;
            ?>
        </ul>
        <p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'visible' : ''; ?>">Thanks for your message! We will get back to you ASAP!</p>
        <form method="post" action="process.php">
            <label for="name">Name: <span class="required">*</span></label>
            <input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required autofocus />

            <label for="email">Email Address: <span class="required">*</span></label>
            <input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com" required />

            <label for="telephone">Telephone: </label>
            <input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />

            <label for="enquiry">Enquiry: </label>
            <select id="enquiry" name="enquiry">
              <option value="Choose" selected>Choose</option>
              <option value="Purchase">Purchase</option>
              <option value="Distribution">Distribution</option>
              <option value="Inquire">Inquire</option>
            </select>

            <label for="message">Message: <span class="required">*</span></label>
            <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>

    <span id="loading"></span>
            <input type="submit" value="Submit" id="submit-button" Link" onClick="window.open ('https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=G6ZNL8H4JXBB8', 'newwindow')"/>
            <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
        </form>
        <?php unset($_SESSION['cf_returndata']); ?>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->

我的Process.php文件如下

<?php
if( isset($_POST) ){

    //form validation vars
    $formok = true;
    $errors = array();

    //sumbission data
    $ipaddress = $_SERVER['REMOTE_ADDR'];
    $date = date('d/m/Y');
    $time = date('H:i:s');

    //form data
    $name = $_POST['name']; 
    $email = $_POST['email'];
    $telephone = $_POST['telephone'];
    $enquiry = $_POST['enquiry'];
    $message = $_POST['message'];

    //validate form data

    //validate name is not empty
    if(empty($name)){
        $formok = false;
        $errors[] = "You have not entered a name";
    }

    //validate email address is not empty
    if(empty($email)){
        $formok = false;
        $errors[] = "You have not entered an email address";
    //validate email address is valid
    }elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $formok = false;
        $errors[] = "You have not entered a valid email address";
    }

    //validate message is not empty
    if(empty($message)){
        $formok = false;
        $errors[] = "You have not entered a message";
    }
    //validate message is greater than 20 charcters
    elseif(strlen($message) < 20){
        $formok = false;
        $errors[] = "Your message must be greater than 20 characters";
    }

    //send email if all is ok
    if($formok){
        $headers = "From: myemail@mail.com" . "\r\n";
        $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

        $emailbody = "<p>You have recieved a new message from the enquiries form on your website.</p>
                      <p><strong>Name: </strong> {$name} </p>
                      <p><strong>Email Address: </strong> {$email} </p>
                      <p><strong>Telephone: </strong> {$telephone} </p>
                      <p><strong>Enquiry: </strong> {$enquiry} </p>
                      <p><strong>Message: </strong> {$message} </p>
                      <p>This message was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>";

        mail("myemail@mail.com","New Enquiry",$emailbody,$headers);

    }

    //what we need to return back to our form
    $returndata = array(
        'posted_form_data' => array(
            'name' => $name,
            'email' => $email,
            'telephone' => $telephone,
            'enquiry' => $enquiry,
            'message' => $message
        ),
        'form_ok' => $formok,
        'errors' => $errors
    );


    //if this is not an ajax request
    if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){
        //set session variables
        session_start();
        $_SESSION['cf_returndata'] = $returndata;

        //redirect back to form
        header('location: ' . $_SERVER['HTTP_REFERER']);
    }
}

2 个答案:

答案 0 :(得分:0)

你可以在单个php文件中完成所有操作。 (比如 form_disp_process.php

<?php

 if( isset($_POST) )
 {

// check validation set formok=true or false

  if($formok)
  {

   //mail data
   // if u want to redirect user to new welcome page after mailing
   echo "
   <script language='JavaScript'>
    window.location = 'welcomepage.php';
    //window.open ('https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=G6ZNL8H4JXBB8', 'newwindow')"
   </script>
       ";
   }
}
else
{
  //init variables

  ?>
  <ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
        <li id="info">There were some problems with your form submission:</li>
        <?php
        if(isset($cf['errors']) && count($cf['errors']) > 0) :
            foreach($cf['errors'] as $error) :
        ?>
        <li><?php echo $error ?></li>
        <?php
            endforeach;
        endif;
        ?>
    </ul>
    <p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'visible' : ''; ?>">Thanks for your message! We will get back to you ASAP!</p>
    <form method="post" action="form_disp_process.php">
        <label for="name">Name: <span class="required">*</span></label>
        <input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required autofocus />

        <label for="email">Email Address: <span class="required">*</span></label>
        <input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com" required />

        <label for="telephone">Telephone: </label>
        <input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />

        <label for="enquiry">Enquiry: </label>
        <select id="enquiry" name="enquiry">
          <option value="Choose" selected>Choose</option>
          <option value="Purchase">Purchase</option>
          <option value="Distribution">Distribution</option>
          <option value="Inquire">Inquire</option>
        </select>

        <label for="message">Message: <span class="required">*</span></label>
        <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>

     span id="loading"></span>
        <input type="submit" value="Submit" id="submit-button" Link" />
        <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
    </form>
    <?php unset($_SESSION['cf_returndata']); ?>
</div>
</div>

<?php
 } //else close
 ?>

答案 1 :(得分:0)

既然你提到了HTML5。我正在添加另一个答案 使用Javascript验证您的表单,然后重定向到paypal网站
你犯的错误:

代码HTML5 + JavaScript:

     <head>
     <script type="text/javascript">
     function checklength()
     {
        var x=document.forms["myform"]["message"].value;
        if(x.length < 20)
        {
            alert("Your message must be greater than 20 charcter");
            document.getElementById('errors').innerHTML = 'Your message must be greater than 20 charcter';
            return false;
         }

       return true;
      }

    </script> 

      </head>
      <body>
      <div id= "errors"> </div>

     <form method="post" name="myform" onsubmit="return checklength();" action="mail_me_and_redirect_to_paypal.php" >
        <label for="name">Name: <span class="required">*</span></label>
        <input type="text" id="name" name="name"  required="required"  value="sdfdf" placeholder="John Doe"  autofocus />

        <label for="email">Email Address: <span class="required">*</span></label>
        <input type="email" id="email" name="email"  required="required" value="dsfds@sdf.com" placeholder="johndoe@example.com"  />

        <label for="telephone">Telephone: </label>
        <input type="tel" id="telephone" name="telephone" required="required" value="werwe" />

        <label for="enquiry">Enquiry: </label>
        <select id="enquiry" name="enquiry">
          <option value="Choose" selected>Choose</option>
          <option value="Purchase">Purchase</option>
          <option value="Distribution">Distribution</option>
          <option value="Inquire">Inquire</option>
        </select>

        <label for="message">Message: <span class="required">*</span></label>
        <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" ></textarea>

        <input type="submit" value="Submit"   />
        <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
    </form>
    </body>