Question

I have my HTML and JS, how would I use this form in my JS so if one of the fields are not entered, the form doesnt submit and shows me my original please enter all fields error

Form:

 <form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">

HTML:

    <!doctype html>
    <html lang="en">
    <head>
      <title> Forms </title>
      <style>
        span {
          padding-left: 10px;
          display: block;
          float: left;
          width: 20%;
        }
        button { margin-left: 10px; }
        body {
          width: 80%; margin: auto; font-family: sans-serif;
          border: 1px solid black;
        }
      </style>
      <meta charset="utf-8">
      <script src="prototype.js"></script>
      <script src="forms.js"></script>
    </head>
    <body>
      <h1> Keyboard  Events and Form Submit </h1>
<!-- Form -->
      <form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">
      <p> <span>Name:</span> <input id="input1" value="" placeholder="Enter Name" name="Name"></p>
      <p> <span>Id:</span> <input id="input2" value=""
      placeholder="Enter ID" name="ID"></p>
      <p> <span>Email:</span> <input id="input3" value="" placeholder="Enter Email" name="Email"></p>
      <p>
      <button id="submitButton" type="button"  onclick="submit()"> Submit </button>
      <button id="resetButton" type="button"  onclick="reset()"> Reset </button>
      </p>
      <p style="color:red" id="ErrorMessage"> </p>

    </body>
    </html>

JS:

function reset(){
  document.getElementById('input1').value = "";
  document.getElementById('input2').value = "";
  document.getElementById('input3').value = "";
  document.getElementById('ErrorMessage').innerHTML = "";
}

function submit(){
  var inp1 = document.getElementById('input1').value;
  var inp2 = document.getElementById('input2').value;
  var inp3 = document.getElementById('input3').value;
  if(inp1 == "" || inp2 == "" || inp3 == "")
  {
  document.getElementById('ErrorMessage').innerHTML = "Please enter all fields";
  }
  else{
  //do your code here
  document.getElementById('ErrorMessage').innerHTML = "";
  }
}

Answer 1

将按钮类型更改为“提交”并在onsubmit事件处理程序中进行验证：

  js_cont_var_lookup <- reactive({
  JS(
      'function(nRow, aData) {
      for (i=2; i < 3; i++) {
      if (parseFloat(aData[i]) > aData[1]*(1.03)) {
        $("td:eq(" + i + ")", nRow).css("background-color", "aqua");
         }
        }
       for (i=2; i < 3; i++) {
       if (parseFloat(aData[i]) < aData[1]*(.7)) {
        $("td:eq(" + i + ")", nRow).css("background-color", "red");
         }
        }
       }'
      ) # close JS
})

shinyApp(
  ui = fluidPage(
    DTOutput("dummy_data_table")
  ),
  server = function(input, output) {
    output$dummy_data_table <- DT::renderDataTable(
      data.frame(A=c(100000, 200000, 300000), B=c(140000, 80000, 310000)) %>%
        datatable(extensions = 'Buttons',
                  options = list(
                    pageLength = 50,
                    scrollX=TRUE,
                    dom = 'T<"clear">lBfrtip',
                    rowCallback = js_cont_var_lookup()
                  )
        ) %>%
        formatCurrency(1:2, currency = "", interval = 3, mark = ",")
    ) # close renderDataTable
  }
)

将所有验证逻辑移动到validateMethod中，如果验证失败，则返回false。

下面是一个示例，但我认为您应该为此使用一个jQuery库：

<form onsubmit="return validateMethod()" />

Answer 2

您可以简单地使用document.getElementById('myForm').addEventListener('submit', () => submit());

但是您需要将<button id="submitButton" type="button" onclick="submit()"> Submit </button>更改为<button id="submitButton" type="submit"> Submit </button>（如Barmar所说），并且还需要关闭<form>标签。

Answer 3

单击提交按钮后，您可以遍历所有输入字段，确定它们是否具有属性required，然后确定它们的值是否为空字符串（!field.value ）

我们将其放在try/catch块中，这样，如果字段是required且没有值，则可以抛出错误并显示，从而摆脱forEach循环消息Please Enter All Required Fields

let submit = document.querySelector("button");

submit.addEventListener("click", submitFn);

function submitFn() {
  try {
    document.querySelectorAll("form input").forEach(function(field) {
      if (field.hasAttribute("required") && !field.value) {
        throw error("not all fields filled in");
      }
    });
    alert("all required fields filled in!")
  } catch {
    alert("please enter all required fields");
  }
}

<form>
  <label>first name </label><input required/>
  <br/>
  <label>last name</label><input required/>
  <br/>
   <label>email ( not required )</label><input />
  <hr>
  <button type="button">submit</button>
</form>

注意：如果将提交按钮的类型更改为submit并将事件从上面的代码从click更改为{{1 }}，但我不知道您是否需要加价，所以我将由您自行决定。

Answer 4

将您的函数名称submit()更改为另一个名称，因为它与内置JS函数冲突，因此onclick="submit()"与this.form.submit()或document.getElementById('myForm').submit();相同

function reset() {
  document.getElementById('input1').value = "";
  document.getElementById('input2').value = "";
  document.getElementById('input3').value = "";
  document.getElementById('ErrorMessage').innerHTML = "";
}

function checkSubmit() {
  var inp1 = document.getElementById('input1').value;
  var inp2 = document.getElementById('input2').value;
  var inp3 = document.getElementById('input3').value;
  if (inp1 == "" || inp2 == "" || inp3 == "") {
    document.getElementById('ErrorMessage').innerHTML = "Please enter all fields";
  } else {
    //do your code here
    document.getElementById('ErrorMessage').innerHTML = "submitting form";
    document.getElementById('myForm').submit();
  }

}

span {
  padding-left: 10px;
  display: block;
  float: left;
  width: 20%;
}

button {
  margin-left: 10px;
}

body {
  width: 80%;
  margin: auto;
  font-family: sans-serif;
  border: 1px solid black;
}

<h1> Keyboard Events and Form Submit </h1>
<!-- Form -->
<form id="myForm" action="https://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">
  <p> <span>Name:</span> <input id="input1" value="" placeholder="Enter Name" name="Name"></p>
  <p> <span>Id:</span> <input id="input2" value="" placeholder="Enter ID" name="ID"></p>
  <p> <span>Email:</span> <input id="input3" value="" placeholder="Enter Email" name="Email"></p>
  <p>
    <button id="submitButton" type="button" onclick="checkSubmit()"> Submit </button>
    <button id="resetButton" type="button" onclick="reset()"> Reset </button>
  </p>
  <p style="color:red" id="ErrorMessage"> </p>
</form>

Form Field Submission

4 个答案: