javascript - 当表单为空时函数运行

Question

我正在尝试创建一个表单，如果未填写表单，则传递的函数将不会提交。但是使用下面的代码，只要表单为空，函数仍然会运行。

const ELS_pages = document.querySelectorAll(".page");
const ELS_buttons = document.querySelectorAll("[data-page]");

console.log(ELS_pages);
const submit = document.querySelector(".submit");
const goToPage = (id) => {
  ELS_pages.forEach((EL) => EL.classList.toggle("u-none", EL.id !== id));
};

ELS_buttons.forEach((EL) =>
  EL.addEventListener("click", () => {
    console.log(EL.dataset.page);
    goToPage(EL.dataset.page);
  })
);
const myForm = document.querySelector("#form-id");
const name = document.querySelector("#name");
const pin = document.querySelector("#pin");
myForm.addEventListener("submit", function (e) {
  e.preventDefault();
  if (name.value !== "" && pin.value !== "") {
    console.log("white");
    // submit.dataset.page = settings;
    submit.addEventListener("click", function () {
      goToPage(submit);
    });
  } else {
    alert("you need to input");
  }
});

nav {
  display: flex;
}
nav a {
  color: #00f;
  padding: 5px 10px;
  cursor: pointer;
}
/* Utility classes */
.u-none {
  display: none;
}

<div class="main-container">
  <div class="page" id="page-login">
    <h1>Welcome</h1>
    <button type="button" data-page="page-main">ENTER</button>
  </div>

  <div class="page u-none" id="page-main">
    <nav>
      <a data-page="page-settings">User Settings</a>
      <a data-page="page-login">Logout</a>
    </nav>
    <h1>MAIN PAGE</h1>
    <form action="" id="form-id">
      <label for="name">Name</label>
      <input type="text" id="name" />
      <label for="pin">Pin</label>
      <input type="text" id="pin" />
      <button type="submit" class="submit" data-page="page-settings">
        Submit
      </button>
    </form>
  </div>

  <div class="page u-none" id="page-settings">
    <nav>
      <a data-page="page-main">Back to Main</a>
      <a data-page="page-login">Logout</a>
    </nav>
    <h1>SETTINGS PAGE</h1>
  </div>
</div>

标签： javascripthtmlcssforms

Answer 1

你需要这样的东西：

HTML：

<div class="main-container">
  <div class="page" id="page-login">
    <h1>Welcome</h1>
    <button type="button" data-page="page-main">ENTER</button>
  </div>

  <div class="page u-none" id="page-main">
    <nav>
      <a data-page="page-settings">User Settings</a>
      <a data-page="page-login">Logout</a>
    </nav>
    <h1>MAIN PAGE</h1>
    <form name="myForm" onsubmit="return validateForm()" action="" id="form-id">
      <label for="name">Name</label>
      <input type="text" id="name" name="fname" />
      <label for="pin">Pin</label>
      <input type="text" id="pin" name="fname1"/>
      <button type="submit" class="submit">
        Submit
      </button>
    </form>
  </div>

  <div class="page u-none" id="page-settings">
    <nav>
      <a data-page="page-main">Back to Main</a>
      <a data-page="page-login">Logout</a>
    </nav>
    <h1>SETTINGS PAGE</h1>
  </div>
</div>

CSS：

nav {
  display: flex;
}
nav a {
  color: #00f;
  padding: 5px 10px;
  cursor: pointer;
}
/* Utility classes */
.u-none {
  display: none;
}

JS

const ELS_pages = document.querySelectorAll(".page");
const ELS_buttons = document.querySelectorAll("[data-page]");

console.log(ELS_pages);
const submit = document.querySelector(".submit");
const goToPage = (id) => {
  ELS_pages.forEach((EL) => EL.classList.toggle("u-none", EL.id !== id));
};

ELS_buttons.forEach((EL) =>
  EL.addEventListener("click", () => {
    console.log(EL.dataset.page);
    goToPage(EL.dataset.page);
  })
);
const myForm = document.querySelector("#form-id");
const name = document.querySelector("#name");
const pin = document.querySelector("#pin");




function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
   var x1 = document.forms["myForm"]["fname1"].value;
  if (x == "" || x == null || x1 == "" || x1 == null ) {
 
    return false;
  }
}

我刚刚添加了 validateForm() 函数以在您的表单中签入 onsumbit

现在，当您在名称和密码为空时单击页面上的 Sumbit 时 - 表单不会执行任何操作