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

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

我得到了这个答案，我希望将来有人需要它，所以我会发布答案。

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

1 个答案: