如何使用php和jquery验证向导表单？_Php_Jquery_Session_Cookies

如何使用php和jquery验证向导表单？

php jquery session cookies

如何使用php和jquery验证向导表单？,php,jquery,session,cookies,Php,Jquery,Session,Cookies,简要说明这个简单的jQuery向导是如何工作的会话用于保存每个步骤的数据由一个会话变量组成，以保存我们所处的步骤由用于存储表单数据的会话变量组成每次更改步骤时，都会使用ajax请求在会话中保存表单和步骤的数据如果数据已更新，则会从会话中检索数据此向导表单由3个步骤组成。因为我可以纠正错误并用php验证表单，如果有一个字段没有数据，请不要进入下一步，直到用户完成表单的所有字段在每个文本输入的每个表单字段中都有警告错误。向我显示一条警告消息注意：第229行的C:\xampp\h

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

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

此向导表单由3个步骤组成。

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

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

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

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

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

我的完整代码：

wizar.php

<?php

session_start();

// check if there is a previous step.
if ( !empty($_SESSION['datos_form']['__paso__']) ) {
    $paso = $_SESSION['datos_form']['__paso__'];
}
// if there is no previous step we set step 1.
else{
    $paso = '1';
}

?><!DOCTYPE html>
<html>
<head>
    <title>Form por pasos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    mostrar_paso(<?= $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);
    });
};

</script>

</head>
<body>

<div class="setup">
    <ul class="backdrop">
        <li class="process item1">step 1</li>
        <li class="process item2">step 2</li>
        <li class="process item3">FINALIZE</li>
    </ul>
</div>


<form id="form" action="procesar.php">
    <div id="paso1" class="step">
        <input type="text" name="campo1" value="<?= $_SESSION['datos_form']['campo1']; ?>">

        <select class="form-select" name="sexo">
            <?php 
                if( !empty($_SESSION['datos_form']['sexo']) ) {
                    $sexo = $_SESSION['datos_form']['sexo'];
                    echo '<option value="'.$sexo.'" selected="selected">'.$sexo.'</option>';
                }
                else{
                    echo '<option disabled selected="selected">I am...</option>';
                }
            ?>
            <option value="Mem">Men</option>
            <option value="Woman">Woman</option>
            <option value="I prefer not to say">I prefer not to say</option>        
        </select>

        <?php 
            if( !empty($_SESSION['datos_form']['condiciones']) ) {
                echo '<input type="checkbox" name="condiciones" checked>';
            }
            else{
                echo '<input type="checkbox" name="condiciones">';
            }
        ?>
        ...


onclick="mostrar_paso('numero de paso') -->
        <a href="#2" onclick="mostrar_paso(2)">continuar</a>
    </div>
    <div id="paso2" class="step">

        <?php
            $r =array(
                    1 => 'Product 1',
                    2 => 'Product 2',
                    3 => 'Product 3',
                );

            foreach ($r as $key => $value) 
            {
                if( $_SESSION['datos_form']['radio'] == $key ) {
                    echo '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'"  checked="checked" >';
                    echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
                }
                else{
                    echo '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'" >';
                    echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
                }
            }
        ?>

        <a href="#1" onclick="mostrar_paso(1)">Atras</a>
        <a href="#3" onclick="mostrar_paso(3)">continuar</a>
    </div>
    <div id="paso3" class="step">
        <div id="div_producto"></div><br>

        <input type="text" name="campo3" value="<?= $_SESSION['datos_form']['campo3']; ?>">
        <input type="submit" name="cancel">
        <a href="#2" onclick="mostrar_paso(2)">Atras</a>
        <input type="submit" name="Terminar">
    </div>
</form>

</body>
</html>


表格por pasos
$（文档）.ready（函数（）{
mostrar_paso（）；
});
功能动物（caso）{
开关（caso）{
案例1：
$（.background”）.css（“背景位置，`0px 0px`）；
打破
案例2：
$（.background”）.css（“背景位置，`0px-16px`）；
打破
案例3：
$（.background”）.css（“背景位置，`0px-32px`）；
打破
违约：
$（.background”）.css（“背景位置，`0px 0px`）；
};
};
函数mostrar_paso（paso）
{
var data=$（“#form”）.serialize（）；
var url='saveTemp.php？paso='+paso；
var valor_radio=$（'input:radio[name=radio]：选中'）。下一步（“标签”）.text（）；
$.ajax({
类型：“POST”，
url:url，
数据：数据
})
.完成（功能（resp）{
$（'.step'）.css（“显示”、“无”）；
$（'#paso'+paso）.fadeIn（“慢”）；
$（'div_producto'）.html（valor_radio）；
动物（paso）；
});
};

步骤1
步骤2
最终确定

因为如果有错误，我可以纠正错误并用php验证表单
没有数据的字段不允许进入下一步，直到所有字段
表格的所有部分均由用户填写
您需要在saveTemp.php下编写如下验证规则：

<?php
session_start();
//form validation
switch($_GET['paso']){
    case 2:
        if(empty($_POST['campo1'])){//you may add any validation rule you want here
            die(json_encode(array('status' => 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....')));


表格por pasos
.背景{
位置：绝对位置；
宽度：630px；
高度：16px；
背景：url（//drh.img.digitalriver.com/DRHM/Storefront/Site/avast/cm/images/avast/2014/breadcrumb-3.png）不重复；
列表样式类型：无；
文本转换：大写；
}
.步骤{
填充顶部：30px；
显示：无；
}
.第1步{
显示：块；
}
.设置{
宽度：100%；
高度：100px；
填充：50px 0px 0px 50px；
背景色：rgba（29,36,36,0.25）；
}
.过程{
位置：绝对位置；
顶部：-30px；
颜色：#e8e8e8；
字体大小：1.1米；
}
.过程.项目2{
左侧填充：190px；
}
.过程.项目3{
左侧填充：400px；
}
.过程.项目4{
左侧填充：580px；
}
.过程.项目5{
左侧填充：690px；
}
.过程.项目6{
左侧填充：790px；
}
ulli{
保证金：0；
填充：0；
边界：无；
列表样式：无；
列表样式类型：无；
空白：nowrap；
}
.步骤{
显示：无；
}
$（文档）.ready（函数（）{
$（'.step'）.css（“显示”、“无”）；
$（'paso'+）.fadeIn（“慢”）；
$（'div_producto'）.html（valor_radio）；
动物（）；
});
功能动物（caso）{
开关（caso）{
案例1：
$（.background”）.css（“背景位置，`0px 0px`）；
打破
案例2：
$（.background”）.css（“背景位置，`0px-16px`）；
打破
案例3：
$（.background”）.css（“背景位置，`0px-32px`）；
打破
违约：
$（.background”）.css（“背景位置，`0px 0px`）；
};
};
函数mostrar_paso（paso）
{
var data=$（“#form”）.serialize（）；
var url='saveTemp.php？paso='+paso；
var valor_radio=$（'input:radio[name=radio]：选中'）。下一步（“标签”）.text（）；
$.ajax({
类型：“POST”，
url:url，
数据：数据，
数据类型：“json”
})
.完成（功能（resp）{
如果（各自状态）
{
$（'.step'）.css（“显示”、“无”）；
$（'#paso'+paso）.fadeIn（“慢”）；
$（'div_producto'）.html（valor_radio）；
动物（paso）；
}否则{
var old_paso=paso-1；
警报（响应消息）；
$（'.step'）.css（“显示”、“无”）；
$（'paso'+old_paso）.fadeIn（“慢”）；
$（'div_producto'）.html（valor_radio）；
动物（old_paso）；
}
});
};

步骤1
步骤2
最终确定

@mplungjan我不明白，我在我的问题中详细说明了必要性，它是如何工作的，以便他们得出我提出的想法和错误。不清楚？发布你的wizar.php而不是form.phpmy向导表单仅基于两个已发布的文件，没有其他依赖文件或其他链接文件。我如何更正错误以及我将不得不验证表单的每个字段，就我所做的努力而言，我只会出现php警告错误，帮帮我，是的，正如我提到的
<?php
session_start();
//form validation
switch($_GET['paso']){
    case 2:
        if(empty($_POST['campo1'])){//you may add any validation rule you want here
            die(json_encode(array('status' => 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({
      type: "POST",
      url: url,
      data: data,
      dataType: 'json'
    })
    .done(function( resp ) {
        if(resp.status)
        {
            $('.step').css( "display", "none" );
            $('#paso'+paso).fadeIn("slow");
            $('#div_producto').html(valor_radio);
            animacion(paso);
        }else{
            var old_paso = paso-1;
            alert(resp.message);
            $('.step').css( "display", "none" );
            $('#paso'+old_paso).fadeIn("slow");
            $('#div_producto').html(valor_radio);
            animacion(old_paso);            
        }
    });
<?php

session_start();

// check if there is a previous step.
if ( !empty($_SESSION['datos_form']['__paso__']) ) {
    $paso = $_SESSION['datos_form']['__paso__'];
}
// if there is no previous step we set step 1.
else{
    $paso = '1';
}

?><!DOCTYPE html>
<html>
<head>
    <title>Form por pasos</title>
<style type="text/css">
.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;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.step').css( "display", "none" );
    $('#paso'+<?= $paso; ?>).fadeIn("slow");
    $('#div_producto').html(valor_radio);
    animacion(<?= $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,
      dataType: 'json'
    })
    .done(function( resp ) {
        if(resp.status)
        {
            $('.step').css( "display", "none" );
            $('#paso'+paso).fadeIn("slow");
            $('#div_producto').html(valor_radio);
            animacion(paso);
        }else{
            var old_paso = paso-1;
            alert(resp.message);
            $('.step').css( "display", "none" );
            $('#paso'+old_paso).fadeIn("slow");
            $('#div_producto').html(valor_radio);
            animacion(old_paso);            
        }
    });
};

</script>

</head>
<body>

<div class="setup">
    <ul class="backdrop">
        <li class="process item1">step 1</li>
        <li class="process item2">step 2</li>
        <li class="process item3">FINALIZE</li>
    </ul>
</div>


<form id="form" action="procesar.php">
    <div id="paso1" class="step">
        <input type="text" name="campo1" value="<?= (!empty($_SESSION['datos_form']['campo1'])) ? $_SESSION['datos_form']['campo1'] : '' ; ?>">

        <select class="form-select" name="sexo">
            <?php 
                if( !empty($_SESSION['datos_form']['sexo']) ) {
                    $sexo = $_SESSION['datos_form']['sexo'];
                    echo '<option value="'.$sexo.'" selected="selected">'.$sexo.'</option>';
                }
                else{
                    echo '<option disabled selected="selected">I am...</option>';
                }
            ?>
            <option value="Mem">Men</option>
            <option value="Woman">Woman</option>
            <option value="I prefer not to say">I prefer not to say</option>        
        </select>

        <?php 
            if( !empty($_SESSION['datos_form']['condiciones']) ) {
                echo '<input type="checkbox" name="condiciones" checked>';
            }
            else{
                echo '<input type="checkbox" name="condiciones">';
            }
        ?>
        ...


onclick="mostrar_paso('numero de paso') -->
        <a href="#2" onclick="mostrar_paso(2)">continuar</a>
    </div>
    <div id="paso2" class="step">

        <?php
            $r =array(
                    1 => '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 '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'"  checked="checked" >';
                    echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
                }
                else{
                    echo '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'" >';
                    echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
                }
            }
        ?>

        <a href="#1" onclick="mostrar_paso(1)">Atras</a>
        <a href="#3" onclick="mostrar_paso(3)">continuar</a>
    </div>
    <div id="paso3" class="step">
        <div id="div_producto"></div><br>

        <input type="text" name="campo3" value="<?= (!empty($_SESSION['datos_form']['campo3'])) ? $_SESSION['datos_form']['campo3'] : ''; ?>">
        <input type="submit" name="cancel">
        <a href="#2" onclick="mostrar_paso(2)">Atras</a>
        <input type="submit" name="Terminar">
    </div>
</form>

</body>
</html>