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

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

1. 为每个步骤的每个下一步按钮指定一个不同的类名（“js-next1，js-next2）”。

2. 现在将这些按钮绑定到点击事件（函数）以在点击这些按钮时验证所需的字段。