Question

我使用验证进行自定义向导，但是当我单击“下一步”按钮进行第一步检查验证时，单击下一步单击下一步按钮时，它不会检查验证并跳过该步骤。

HTML如下所示：

'^\s*#TODO:.+$'

下面的脚本：分离的函数使用更新状态意味着查找索引和更新，验证，下一个按钮和上一个按钮。

<form>
            <div class="form-main">
                <div class="form-input">
                    <input type="text" id="fname" placeholder="First Name">
                    <p id="error"></p>
                </div>
                <div class="form-input">
                    <input type="text" id="lname" placeholder="Last Name">
                    <p id="error"></p>
                </div>
                <div class="form-input">
                    <input type="email" id="email" placeholder="Email">
                    <p id="error"></p>
                </div>
                <div class="form-input">
                    <input type="password" id="password" placeholder="Password">
                    <p id="error"></p>
                </div>
                <div class="form-btn">
                    <button type="button" id="prev" onClick="prevBtn(this);">prev</button>
                    <button type="button" id="next" onClick="nextBtn(this);">next</button>
                    <button type="submit" id="submit">submit</button>
                </div>
            </div>    
        </form>

Answer 1

所以我做了一些改动并让它发挥作用。

更改

var inputValue = $(input).val();

到下面，因为你需要检查当前的可见元素

var inputValue = $('input:visible').val();

其次，您不能将error作为多个元素的相同ID，因此我已将其删除。 ID是唯一的。

$(window).on('load', function() {
  $('.form-main > .form-input:nth-child(1)').addClass('open');
  $('.form-main > .form-input:not(".open")').addClass('close').hide();
});

var $div = $('.form-input');
var submits = $('#submit').css('display', 'none');
index = 0;

function updateStatus(a) {
  $div.eq(index).removeClass('current').addClass('close').hide();
  index += a;

  $div.eq(index).addClass('current').removeClass('close').show();

  $('#next').toggle((index !== $div.length - 1));
  $('#prev').toggle(index !== 0);

  if (index == ($div.length - 1)) {
    submits.toggle(index !== 0);
  } else {
    submits.hide();
  }
}

var input = document.getElementsByTagName('input');

function validation() {
  var inputValue = $('input:visible').val();
  var inputType = $(input).attr('type');
  if (inputValue !== '') {
    updateStatus(+1);
  } else {
    $('input:visible').next().html("please enter the value");
  }
}

function nextBtn() {
  validation();
}

function prevBtn() {
  updateStatus(-1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-main">
    <div class="form-input">
      <input type="text" id="fname" placeholder="First Name">
      <p></p>
    </div>
    <div class="form-input">
      <input type="text" id="lname" placeholder="Last Name">
      <p></p>
    </div>
    <div class="form-input">
      <input type="email" id="email" placeholder="Email">
      <p></p>
    </div>
    <div class="form-input">
      <input type="password" id="password" placeholder="Password">
      <p></p>
    </div>
    <div class="form-btn">
      <button type="button" id="prev" onClick="prevBtn(this);">prev</button>
      <button type="button" id="next" onClick="nextBtn(this);">next</button>
      <button type="submit" id="submit">submit</button>
    </div>
  </div>
</form>

如何单击“下一步”按钮第一步检查验证和第二步不检查验证？

1 个答案: