关联“多步骤系统”;还有一个“事件系统”

Associate a "multi-step system" and an "event system"

本文关键字：事件系统 有一个 系统 关联 多步骤系统      更新时间：2023-09-26

我使用欧芹制作一个有几个步骤/屏幕的表单:

如果我只做一个多步骤的形式，它的工作，但我想使用两者(上面的链接)和Parsley事件演示(因为我想获得至少一个用户电话号码)在同一时间。

它是如何工作的:用户在第一个屏幕的开头写他/她的个人数据，在最后写他/她的电话号码。他/她验证第一个屏幕，然后他/她可以导航到第二个屏幕，只要他/她提供了他/她的个人数据和至少一个电话号码。

我的问题是屏幕末端的按钮。在多步骤表单中，按钮显示为:

<html>
    <span class="next btn btn-info pull-right" data-current-block="1" data-next-block="2" />Continuer></span>
</html>

在"Parsley Events Demo"中，它看起来是这样的:

<html><input type="submit" class="btn btn-default validate" /></html>

我如何"关联"这些按钮，以便在下一个屏幕之前验证个人数据和电话号码测试?如果我只使用一个"提交按钮"与"欧芹事件演示"，系统使一个关于电话号码的验证，如果我只使用一个"跨度按钮"与"多步骤表单"，系统带我到第二个屏幕。这两个按钮的行为是不兼容的。

谢谢。

在parsley中，它们在单击下一个按钮时进行验证。

$('.next').on('click', function () { ... }

如果您需要验证不同的情况，请在下一步之前添加测试。

if(false === myValidationTest())
 return;

并为您的案例创建javascript验证函数。

function myValidationTest(){ .... return bool; }

哟，这是你的表单字段吗?

<div class="form-group">
        <h4>Correctly fill at least one of these blocks</h4>
        <form id="demo-form" data-parsley-validate>
          <div class="first">
            <label for="firstname">Firstname:</label>
            <input type="text" class="form-control" name="firstname" data-parsley-range="[4, 20]" data-parsley-group="block1" />
            <label for="lastname">Lastname:</label>
            <input type="text" class="form-control" name="lastname" data-parsley-range="[4, 20]" data-parsley-group="block1" />
          </div>
          <hr></hr>
          <div class="second">
            <label for="fullname">Telephone #1</label>
            <input type="text" class="form-control" name="fullname" data-parsley-range="[8, 40]" data-parsley-group="block2" />
          </div>
          <div class="second">
            <label for="fullname">Telephone #2</label>
            <input type="text" class="form-control" name="fullname" data-parsley-range="[8, 40]" data-parsley-group="block3" />
          </div>
          <div class="invalid-form-error-message"></div>
          <input type="submit" class="btn btn-default validate" />
        </form>
      </div>
相关文章：