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 = "";
}
}
答案 0 :(得分：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()" />
答案 1 :(得分：1)
您可以简单地使用document.getElementById('myForm').addEventListener('submit', () => submit());
但是您需要将<button id="submitButton" type="button" onclick="submit()"> Submit </button>更改为<button id="submitButton" type="submit"> Submit </button>（如Barmar所说），并且还需要关闭<form>标签。
答案 2 :(得分：1)
单击提交按钮后，您可以遍历所有输入字段，确定它们是否具有属性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 }}，但我不知道您是否需要加价，所以我将由您自行决定。
答案 3 :(得分：1)
将您的函数名称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>