如何使用php和jqueryvalidation向导表单？

这个简单的jQuery向导如何工作的简要说明

• 会话用于保存每个步骤的数据。
• 由一个会话变量组成，以保存我们的步骤。
• 由一个存储表单数据的会话变量组成。
• 每次我们更改步骤时，我们都会使用ajax请求保存表单的数据和会话中的步骤。
• 如果数据被更新，则从会话中检索数据。

此向导表单包含3个步骤。

因为我可以纠正错误并使用phpvalidation表单，如果有一个没有数据的字段，则不要进入下一步，直到用户完成表单的所有字段。

每个文本输入中的每个表单字段都有警告错误，向我显示警告消息。

注意：未定义的索引：第229行的C：\ xampp \ htdocs \ prueba \ wizar.php中的datos_form

我想在保存步骤的会话中添加一个cookie，以避免在浏览器错误关闭的情况下删除存储在会话中的数据，创建一个validation时间为30天的会话cookie。

现在要从用户保存的数据中删除cookie创建取消按钮，取消按钮将删除cookie，包括保存在会话中的数据。

我的完整代码：

wizar.php

     .backdrop { position: absolute; width: 630px; height: 16px; background: url(//drh.img.digitalriver.com/DRHM/Storefront/Site/avast/cm/images/avast/2014/breadcrumb-3.png) no-repeat; list-style-type: none; text-transform: uppercase; } .step { padding-top: 30px; display: none; } .step-1 { display: block; } .setup { width: 100%; height: 100px; padding: 50px 0px 0px 50px; background-color: rgba(29, 36, 36, 0.25); } .process { position: absolute; top: -30px; color: #e8e8e8; font-size: 1.1em; } .process.item2 { padding-left: 190px; } .process.item3 { padding-left: 400px; } .process.item4 { padding-left: 580px; } .process.item5 { padding-left: 690px; } .process.item6 { padding-left: 790px; } ul li { margin: 0; padding: 0; border: none; list-style: none; list-style-type: none; white-space: nowrap; } .step{ display: none; }    $(document).ready(function() { mostrar_paso(); }); function animacion(caso){ switch(caso) { case 1: $(".backdrop").css("background-position", `0px 0px`); break; case 2: $(".backdrop").css("background-position", `0px -16px`); break; case 3: $(".backdrop").css("background-position", `0px -32px`); break; default: $(".backdrop").css("background-position", `0px 0px`); }; }; function mostrar_paso(paso) { var data = $( "#form" ).serialize(); var url = 'saveTemp.php?paso=' + paso; var valor_radio = $('input:radio[name=radio]:checked').next("label").text(); $.ajax({ type: "POST", url: url, data: data }) .done(function( resp ) { $('.step').css( "display", "none" ); $('#paso'+paso).fadeIn("slow"); $('#div_producto').html(valor_radio); animacion(paso); }); };    
 
 
step 1
 
step 2
 
FINALIZE
 
 
 
 
 <input type="text" name="campo1" value="">  <?php if( !empty($_SESSION['datos_form']['sexo']) ) { $sexo = $_SESSION['datos_form']['sexo']; echo ''.$sexo.''; } else{ echo 'I am...'; } ?> Men Woman I prefer not to say  <?php if( !empty($_SESSION['datos_form']['condiciones']) ) { echo ''; } else{ echo ''; } ?> ... onclick="mostrar_paso('numero de paso') --> continuar 
 
  'Product 1', 2 => 'Product 2', 3 => 'Product 3', ); foreach ($r as $key => $value) { if( $_SESSION['datos_form']['radio'] == $key ) { echo ''; echo ''.$value.''; } else{ echo ''; echo ''.$value.''; } } ?> Atras continuar 
 
 

 <input type="text" name="campo3" value="">  Atras  
 
   

saveTemp.php

注意：此文件负责保存表单的步骤和数据。

 <?php session_start(); // We save the form data in a session variable $_SESSION['datos_form'] = $_POST; // we added the step also to the array, you can not use this name (__paso__) as name in the form $_SESSION['datos_form']['__paso__'] = $_GET['paso']; 

Answer 1

因为我可以纠正错误并使用phpvalidation表单，如果有一个没有数据的字段，则不要进入下一步，直到用户完成表单的所有字段。

您需要在saveTemp.php下编码validation规则，如下所示：

  FALSE,'message' => 'please fill campo ....'))); } if(empty($_POST['sexo'])){ die(json_encode(array('status' => FALSE,'message' => 'please select sexo ....'))); } if(empty($_POST['condiciones'])){ die(json_encode(array('status' => FALSE,'message' => 'please select condiciones ....'))); } break; case 3: //step 2 validation here if(empty($_POST['radio'])){//you may add any validation rule you want here die(json_encode(array('status' => FALSE,'message' => 'please fill radio1 ....'))); } break; } // We save the form data in a session variable $_SESSION['datos_form'] = $_POST; // we added the step also to the array, you can not use this name (__paso__) as name in the form $_SESSION['datos_form']['__paso__'] = $_GET['paso']; die(json_encode(array('status' => TRUE,'message' => 'Temporary saved....'))); 

然后在ajax调用状态下检查响应，因此您需要更改ajax调用，如下所示：

     $就（{
      类型：“POST”，
      url：url
      数据：数据，
       dataType：'json'
     }）
     .done（function（resp）{
        如果（resp.status）
         {
             $（'。step'）。css（“display”，“none”）;
             $（ '＃帕索' +帕索）.fadeIn（ “慢”）;
             $（ '＃div_producto'）HTML（valor_radio）;
             animacion（帕索）;
         }其他{
             var old_paso = paso-1;
            警报（resp.message）;
             $（'。step'）。css（“display”，“none”）;
             $（ '＃帕索' + old_paso）.fadeIn（ “慢”）;
             $（ '＃div_producto'）HTML（valor_radio）;
             animacion（old_paso）;            
         }
     }）;

请注意，我将“dataType”添加到您的ajax调用并将其设置为json

每个文本输入中的每个表单字段都有警告错误，向我显示警告消息。

因为你在获取它的值之前没有检查变量的存在，你发布的代码是form.php，但警告抱怨wizar.php行号229，检查该行并使用空函数就像你的代码的其余部分一样

这是wizar.php示例，没有通知/警告：

          
 
 
step 1
 
step 2
 
FINALIZE
 
 
 
 
   '.$sexo.''; } else{ echo 'I am...'; } ?> Men Woman I prefer not to say  '; } else{ echo ''; } ?> ... onclick="mostrar_paso('numero de paso') --> continuar 
 
  'Product 1', 2 => 'Product 2', 3 => 'Product 3', ); foreach ($r as $key => $value) { if( !empty($_SESSION['datos_form']['radio']) AND $_SESSION['datos_form']['radio'] == $key ) { echo ''; echo ''.$value.''; } else{ echo ''; echo ''.$value.''; } } ?> Atras continuar 
 
 

   Atras  
 
   

我想在保存步骤的会话中添加一个cookie，以避免在浏览器错误关闭的情况下删除存储在会话中的数据，创建一个validation时间为30天的会话cookie。

PHP的本机会话，如果访问者浏览器支持cookie已经使用cookie，并且可以在php.ini或运行时通过设置session.cookie_lifetime设置到期时间

现在要从用户保存的数据中删除cookie创建取消按钮，取消按钮将删除cookie，包括保存在会话中的数据。

最后使用session_destroy函数删除procesar.php文件下的cookie