Question

我有一个包含3个部分的表单。每个部分都需要在它移动到下一个部分之前进行验证。

问题是，只有一个部分可以在结束它，因为我调用外部客户端来处理/存储表单。

它需要像提交按钮一样工作的原因是因为它需要验证表单元素。

JS完美地用于导航，需要找到一种合并验证的方法

编辑：提交按钮应该像提交按钮一样工作，但下一个按钮可以作为验证按钮

代码

<form>
    <fieldset>
        <h2>Personal Details</h2>

        <input type="text" name="first_name" placeholder="First Name" required/>
        <input type="text" name="last_name" placeholder="Last Name" required/>

        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
        <h2 class="fs-title"> Details</h2>
        <input type="text" name="emailaddress" placeholder="Email" required/>
        <input type="text" name="phonenum" placeholder="Phone" required/>
        <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
        <h2>More</h2>
        <input type="text" name="city" placeholder="City" />
        <input type="text" name="state" placeholder="State" />
        <input type="text" name="zip" placeholder="Zip Code" />
        <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
        <button type="button" name="submit" class="submit action-button" value="Submit" onclick="callclient()">Submit </button>
    </fieldset>
</form>

Answer 1

你走了。代码注释应该很好地解释它，它可以使用额外的抛光，但它应该让你开始：

<强> HTML ：

// I started by separating each form section into its own form
<form class="form-step">
        <fieldset>
        <h2>Personal Details</h2>

        <input type="text" name="first_name" placeholder="First Name" required/>
        <input type="text" name="last_name" placeholder="Last Name" required/>

        <input type="button" name="next" class="next action-button" value="Next" />
      </fieldset>
</form>
<form class="form-step">
    <fieldset>
        <h2 class="fs-title"> Details</h2>
        <input type="email" name="emailaddress" placeholder="Email" required/>
        <input type="phone" name="phonenum" placeholder="Phone" required/>
        <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
</form>
<form class="form-step">
    <fieldset>
        <h2>More</h2>
        <input type="text" name="city" placeholder="City" />
        <input type="text" name="state" placeholder="State" />
        <input type="text" name="zip" placeholder="Zip Code" />
        <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
        <button type="button" name="submit" class="submit action-button" value="Submit">Submit </button>
    </fieldset>
</form>

<强>的jQuery ：

$(document).ready(function(){

  var forms = $('form');

    // Whenever a button is clicked
  $(':button').on('click', function(e){

    // Get the current form and the button name
    var $form = $(this).parentsUntil('form');
    var button_name = $(this).attr('name');

    // Validate the form unless going backwards
    if(validate($form) || button_name === 'previous'){

        switch(button_name) {
        case 'next':
            // Next
            next_form();
            break;
        case 'previous':
            // Previous
            prev_form();
            break;
        case 'submit' :
                // Submit
            submit_forms();
            break;
        default:
            // Do nothing
        }

    }else{
        // Form not valid
    }

  });

  // Show next
  function next_form(){
    // Get all visible forms
    var visible_forms = $('form:visible');

    // Get the last form in the array
    var $current_form = $(visible_forms).last();

    // Get the next form
    var $next_form = $current_form.next();

    // Handle visibility of buttons
    $current_form.find(':button').css('visibility','hidden');

    // Show the next form
    $next_form.fadeIn();
  }

  // Show previous
  function prev_form(){
    var visible_forms = $('form:visible');
    var $current_form = $(visible_forms).last();
    var $prev_form = $current_form.prev();
    $prev_form.find(':button').css('visibility','visible');
    $current_form.fadeOut();
  }

  // Submit
  function submit_forms(){

    // All forms are valid
    // Create new form programically that contains all form elements
    // Submit it
    var form_data = forms.find('input:not(:button)').clone();
    var action = '/echo/html/';
    var method = 'POST';
    var $full_form = $('<form/>').attr({
        action: action,
      method: method
    }).append(form_data);

    // Submit the form
    $full_form.appendTo('body').css('display','none').submit();

  }

})

// Validate expects jQuery object
function validate($form){

  // Set valid to true
  var valid = true;

  // Any invalid element will set valid to false
  $.each($form.find('input:not(:button)'), function(index, input){
    // Utilizing HTML5 validation
    if(!input.checkValidity()){
        valid = false;
    }
  })

    return valid;
}

Here's the working jsFiddle

使下一个按钮的行为类似于提交按钮

1 个答案: