在打開新窗口之前提交按鈕檢查必填字段

Question

我有一個帶有必填字段等的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']); 
    } 
} 

Answer 1

你可以做所有在單一的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 
?> 

Answer 2

既然你提到HTML5。我是添加另一種答案
使用JavaScript來驗證你的表格，然後重定向到PayPal網站
誤區你做：

• 您已將必填字段的屬性「必填」使用，但您必須提供價值。
  喜歡這張需要= 「必需的」
  參考：http://www.w3schools.com/html5/att_textarea_required.asp

• 沒有屬性稱爲數據MINLENGTH爲textarea的
  參考：http://www.w3schools.com/html5/tag_textarea.asp

代碼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>