如何以步骤形式进行验证？

Question

我有一个包含三个步骤的表格：选择饮料，选择吃和发送。我在验证方面遇到了任何问题。现在我的验证仅适用于提交。但是我需要在每一步（在下一个按钮上）进行验证。怎么做？

$.validity = {

  defaults: {

    errors: {

      badInput: 'Bad input',

      customError: 'Custom error',

      patternMismatch: 'Pattern mismatch',

      rangeOverflow: 'Range overflow',

      rangeUnderflow: 'Range underflow',

      stepMismatch: 'Step mismatch',

      tooLong: 'Too long',

      tooShort: 'Too short',

      typeMismatch: 'Type mismatch',

      valueMissing: 'Value missing'

    },

    unknownError: 'Unknown error',

    output: function(input, message) {

      console.log('validity.output', input, message);

    },

    getMessage: function(input) {

      if (input.validity.valid)

        return '';

      for (var error in this.errors) {

        if (input.validity[error])

          return this.errors[error];

      }

      return this.unknownError;

    }

  }

};

$.fn.validity = function(options) {

  options = $.extend({}, $.validity.defaults, options);

  return this.each(function() {

    var component = $(this);

    var form = component.closest('form');

    var elements = $(form.prop('elements'));

    elements.on('input', function() {

      options.output(this, options.getMessage(this));

    });

    form.on('submit', function(e) {

      if (this.checkValidity())

        return;

      e.preventDefault();

      e.stopPropagation();

      elements.trigger('input');

    });

    form.attr('novalidate', true);

  });

}

var mainForm = '.form';

$(mainForm).validity({

  output: function(input, message) {

    var field = $(input).closest('.form__field');

    field.toggleClass('m-error', !!message);

    field.find('.form__error').text(message);

  }

});

Answer 1

您可以在 javascript 中逐个验证字段：用 ：onClick='validatefunction()'

Answer 2

为每个步骤的每个下一步按钮指定一个不同的类名（“js-next1，js-next2）”。现在将这些按钮绑定到点击事件（函数）以在点击这些按钮时验证所需的字段。