更新

Question

I found this code in codepen.io simply simple, I really do not have any error in the code works perfectly.

I would like to be able to remove the javascript attributes in the tag and be able to add another type of control to continue or back the steps of the form.

Then remove this:

<a href="#" onclick="show_step('1')">back</a>
<a href="#" onclick="show_step('3')">next</a>

And replace with a control in this way:

<a href="#back" class="btn btn-warning back">back</a>
<a href="#next" class="btn btn-success next">next</a>

And thus eliminate these attributes that are easy to modify from the browser console.

onclick="show_step('1')"

let currentStep = 1; // Variable that indicates the current step

function show_step(step) {
  var data = $("#form").serialize();
  var url = 'saveTemp.php?step=' + step;
  var valid = true;

  // [OPTIONAL] We validate only if it is going forward
  if (currentStep < step) {
  
    // We search all input fields within the current step.  
    $('#step' + currentStep).find('input').each((idx, el) => {
      $field = $(el);

      // If the field is empty
      if (!$field.val()) {
        $field.parent().addClass('error');
        valid = false;
      } else {
        $field.parent().removeClass('error');
      }
    });
  }

  // If at least one field was not completed
  if (!valid) {
    return;
  }

  $('#step' + currentStep).css("display", "none");
  $('#step' + step).fadeIn("slow");
  currentStep = step;
};

$(function() {
  $('#step' + currentStep).fadeIn("slow");
});

label {
  display: block;
}
.step {
  display: none;
}
.errorMsg {
  display: none;
  color: red;
}
.error .errorMsg {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form">
  <div id="step1" class="step">
    <h1>Step 1</h1>
    <label>
      <span>Name :</span>
      <input name="name" />
      <div class="errorMsg">You must enter your name</div>
    </label>
    <label>
      <span>last name:</span>
      <input name="last_name" />
      <div class="errorMsg">You must enter your last name</div>
    </label>
    <!-- &&& -->
    <a href="#" onclick="show_step('2')">next</a>
  </div>
  <div id="step2" class="step">
    <h1>Step 2</h1>
    <label>
      <span>Email :</span>
      <input name="email" />
      <div class="errorMsg">You must enter your email</div>
    </label>
    <!-- &&& -->
    <a href="#" onclick="show_step('1')">back</a>
    <a href="#" onclick="show_step('3')">next</a>
  </div>
  <div id="step3" class="step">
    <h1>Step 3</h1>
    <a href="#" onclick="show_step('2')">back</a>
    <a href="#" onclick="show_step('4')">next</a>
  </div>
  <div id="step4" class="step">
    <h1>Step 4</h1>
    <a href="#" onclick="show_step('3')">back</a>
  </div>
</form>

Answer 1

更新

OP目标是使该过程独立于简单的数字索引（尽管有一个计数器但它是url变量）。 演示2 依赖于.next()和.prev()方法移动，有一个Object Literal来存储它的数据，并且在很大程度上依赖于this来定位位置和状态在运行时。 演示2 有更多“移动部件”因此用户更难以通过控制台进行操作。

<小时/> 使用 on() 方法委派所有<a> nchors上的点击事件。

演示1

let currentStep = 0; // Variable that indicates the current step

$('#step' + currentStep).fadeIn("slow");

$('a.next, a.back').on('click', function(e) {
  var step = $(this).data('idx');
  xStep(step);
});

function xStep(step) {
  var data = $("#form").serialize();
  var url = 'saveTemp.php?step=' + step;
  var valid = true;

  // [OPTIONAL] We validate only if it is going forward
  if (currentStep < step) {

    // We search all input fields within the current step.  
    $('#step' + currentStep + ' .data').each(function(idx, el) {

      // If the field is empty
      if (!$(this).val()) {
        $(this).next('.msg').addClass('error');

        valid = false;

      } else {
        $(this).next('.msg').removeClass('error');

      }
    });
    if (!valid) {
      return
    }
  }

  $('#step' + currentStep).css("display", "none");
  $('#step' + step).fadeIn("slow");
  currentStep = step;
}

label {
  display: block;
}

.step,
.msg {
  display: none;
}

.msg.error {
  display: inline-block;
  color: red;
}

legend {
  font: 600 3ch/1.2 Consolas
}

.dir {
  font-size: 2.5ch;
  text-decoration:none; 
}

.next::after {
  content: '\0a\25b6';
  font-size: 2ex;
}

.back::before {
  content: '\25c0\0a';
  font-size: 2ex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form">
  <fieldset id="step0" class="step">
    <legend>Step 1</legend>
    <label>
      First Name:
      <input name="fName" class='data'>
      <b class="msg">You must enter your name</b>
    </label>
    <label>
      Last Name:
      <input name="lName" class='data'>
      <b class="msg">You must enter your last name</b>
    </label>
    <!-- &&& -->
    <a href="#/" class='next dir' data-idx='1'>next</a>
  </fieldset>
  <fieldset id="step1" class="step">
    <legend>Step 2</legend>
    <label>
      Email:
      <input name="email" type='email' class='data'>
      <b class="msg">You must enter your email</b>
    </label>
    <!-- &&& -->
    <a href="#/" class='back dir' data-idx='0'>back</a>
    <a href="#/" class='next dir' data-idx='2'>next</a>
  </fieldset>
  <fieldset id="step2" class="step">
    <legend>Step 3</legend>
    <a href="#/" class='back dir' data-idx='1'>back</a>
    <a href="#/" class='next dir' data-idx='3'>next</a>
  </fieldset>
  <fieldset id="step3" class="step">
    <legend>Step 4</legend>
    <input type='submit'>
    <a href="#/" class='back dir' data-idx='2'>back</a>
  </fieldset>
</form>

<小时/> 在演示中评论的详细信息

演示2

// Object literal stores data
var move = {
  step: 0,
  next: true
};
// Initial step
$('.step:first').fadeIn("slow");

// A click event on any a.dir...
$('a.dir').on('click', function(e) {

  /* Get the fieldset.step parent of this a.dir
  || if this a.dir has .back class...
  */
  var $current = $(this).parent('.step');
  if ($(this).hasClass('back')) {
    //...set the move object properties accordingly
    move.step -= 1;
    move.next = false;
  } else {
    //...otherwise change the properties the other way
    move.step += 1;
    move.next = true;
  }
  /* Invoke call() function on xStep() function
  || to set 'this' as the clicked <a>nchor
  */
  xStep.call(this, move, $current);
});

// Pass the move object and the current .step
function xStep(move, $current) {
  var data = $("#form").serialize();
  var url = 'saveTemp.php?step=' + move.step;

  // if next property is true...
  if (move.next) {

    /* find all .data in current .step and do
    || the following on each of them:
    */
    $current.find('.data').each(function(idx, el) {
      // Find input.data proceeding b.msg
      var $msg = $(this).next('.msg');

      // if this input.data has no value...
      if (!$(this).val()) {

        //...display error meassage
        $msg.addClass('error');
      } else {
        //...otherwise remove any error message
        $msg.removeClass('error');
      }
    });
    // if there are any b.msg.error, end the function
    if ($('.error').length > 0) {
      return;
    }
    // Remove current .step
    $current.css("display", "none");
    // fadeIn proceeding .step
    $current.next('.step').fadeIn("slow");
  } else {
    //...otherwise remove current .step 
    $current.css("display", "none");
    // fadeIn preceeding .step
    $current.prev('.step').fadeIn("slow");
  }
}

html,
body {
  font: 400 1.5ch/1.2 Consolas;
  font-variant: small-caps
}

label,
input {
  font: inherit;
  font-variant: normal
}

label {
  display: block;
}

.step,
.msg {
  display: none;
}

.msg.error {
  display: inline-block;
  color: red;
}

legend {
  font-size: 2.5ch;
}

.dir {
  display: inline-block;
  text-decoration: none;
  margin-top: 12px;
}

.next::after {
  content: '\0a\25b6';
  font-size: 2ex;
}

.back::before {
  content: '\25c0\0a';
  font-size: 2ex;
}

[type=submit] {
  float: right
}

<form id="form">
  <fieldset class="step">
    <legend>Step 1</legend>
    <label>
      First Name:
      <input name="fName" class='data'>
      <b class="msg">First name is required</b>
    </label>
    <label>
      Last Name:&nbsp;
      <input name="lName" class='data'>
      <b class="msg">Last name is required</b>
    </label>
    <!-- &&& -->
    <a href="#/" class='next dir'>Next</a>
  </fieldset>
  <fieldset class="step">
    <legend>Step 2</legend>
    <label>
      Email:
      <input name="email" class='data'>
      <b class="msg">Email: username@domain.com</b>
    </label>
    <!-- &&& -->
    <a href="#/" class='back dir'>Back</a>
    <a href="#/" class='next dir'>Next</a>
  </fieldset>
  <fieldset class="step">
    <legend>Step 3</legend>
    <a href="#/" class='back dir'>Back</a>
    <a href="#/" class='next dir'>Next</a>
  </fieldset>
  <fieldset class="step">
    <legend>Step 4</legend>
    <a href="#/" class='back dir'>Back</a>
    <input type='submit'>
  </fieldset>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何将javascript属性移至<a> tag and replace it with other jQuery properties?

1 个答案:

更新

演示1

演示2