Question

我正在使用Parsley制作一个包含that的几个步骤/屏幕的表单：

如果我只做一个多步形式，它可以工作，但我想同时使用（上面的链接）和Parsley Events Demo（因为我想至少得到一个用户电话号码）同时。

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

我的问题在于屏幕末端的按钮。在“多步骤表单”中，按钮显示为：

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

在＆＃34; Parsley Events Demo＆＃34;中，它看起来像这样：

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

我如何＆＃34;关联＆＃34;这些按钮是为了在下一个屏幕之前验证个人数据和电话号码测试？如果我只使用＆＃34;提交按钮＆＃34;通过＆＃34; Parsley Event Demo＆＃34;，系统会对电话号码进行验证，如果我只使用＆＃34; span按钮＆＃34;使用＆＃34;多步骤表格＆＃34;，系统将我带到第二个屏幕。这两个按钮行为不兼容。

谢谢。

Answer 1

哟，这是你的表格领域？

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

Answer 2

在欧芹中，他们会在下一次点击按钮时进行验证。

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

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

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

为您的案例创建您的javascript验证功能。

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

关联＆＃34;多步骤系统＆＃34;和一个＆＃34;事件系统＆＃34;

2 个答案: