如何在不验证当前选项卡表单字段的情况下防止选项卡更改

Question

如何在不验证当前选项卡表单字段的情况下防止选项卡更改。我有一个很大的注册表单，所以我将该表单分成几个选项卡，当第一个选项卡表单字段未得到验证时，第二个选项卡不应打开。我正在使用 javascript。并且为了验证它会显示一个弹出（警告）框，但在单击该框后确定然后它移动到第二个字段。

请帮助我改进它。这是 javascript:

function checkForm1() {
  // Fetching values from all input fields and storing them in variables.
  var name = document.getElementById("campus_name").value;
  var email = document.getElementById("campus_email").value;
  var password = document.getElementById("campuspwd").value;
  var phone = document.getElementById("campusphone").value;
  var address = document.getElementById("campus_address").value;

  //Check input Fields Should not be blanks.
  if (name == '' || password == '' || email == '' || phone == '') {

    alert("Fill All Fields");   

  } else{
    //Notifying error fields
    var username1 = document.getElementById("username");
    var password1 = document.getElementById("password");
    var email1 = document.getElementById("email");
    var website1 = document.getElementById("website");
    //Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate alert.
    if (username1.innerHTML == 'Must be 3+ letters' || password1.innerHTML == 'Password too short' || email1.innerHTML == 'Invalid email' || website1.innerHTML == 'Invalid website') {
      alert("Fill Valid Information");
    } else {
      //Submit Form When All values are valid.
      document.getElementById("myForm").submit();
    }
  }
}

这是创建标签的html代码：

<div id="rootwizard" class="wizard">
  <!-- Wizard heading -->
  <div class="wizard-head">
    <ul class="bwizard-steps">
      <li id="tab1" class="active primary"><a href="#tab1" data-toggle="tab">Registration Credentials</a></li>
      <li class="primary"  ><a onclick="checkForm1()" href="#tab2" data-toggle="tab">College Details</a></li>
      <li class="primary"><a href="#tab3" data-toggle="tab">College Overview</a></li>
    </ul>
  </div>
</div>

Answer 1

当我检查验证时表单无效时，禁用下一个和上一个按钮。这样它就不允许更改选项卡。如果所有字段都有效，则删除禁用并允许正常处理选项卡。

我得到了这个答案，我希望将来如果有人需要它，我会 post 它的答案。

如何在不验证当前选项卡表单字段的情况下防止选项卡更改

how to prevent tab changing without validating current tabs form fields

javascript

forms

validation

jquery

tabs