javascript函数上的Html输入复选框
我已经使用HTML/CSS/JS创建了一个简单的支付表单，我想使用HTML模式检查用户输入的内容。但我还想使用JS创建一个弹出警报来确认表单，该表单必须在所有必需的输入正确填写且模式正常后弹出。弹出警报还必须包含用户提供的名称并返回。但问题是，当我按下提交按钮时，即使所需信息未填写，警报确实会出现并显示“订单已完成”…只有在正确提供所有信息后，我如何才能使弹出窗口出现？以下是我的代码：javascript函数上的Html输入复选框,javascript,html,css,Javascript,Html,Css,我已经使用HTML/CSS/JS创建了一个简单的支付表单，我想使用HTML模式检查用户输入的内容。但我还想使用JS创建一个弹出警报来确认表单，该表单必须在所有必需的输入正确填写且模式正常后弹出。弹出警报还必须包含用户提供的名称并返回。但问题是，当我按下提交按钮时，即使所需信息未填写，警报确实会出现并显示“订单已完成”…只有在正确提供所有信息后，我如何才能使弹出窗口出现？以下是我的代码： <!DOCTYPE html> <html> <style>
<!DOCTYPE html>
<html>
<style>
body {
border:10px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 150px;
}
p.thick {
font-weight: bold;
}
input[type=text], select {
width: 100%;
padding: 20px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=text]:focus {
border: 3px solid #555;
}
input[type=password]:focus {
border: 3px solid #555;
}
input[type=password], select {
width: 100%;
padding: 20px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: red;
}
div {
border-radius: 5px;
background-color:rgb(238, 238, 232);
padding: 40px;
}
</style>
<body onload="CreditCard();">
<form id="Myform">
<div class="login-page">
<div class="form">
<fieldset>
<h1>Log in </h1>
<p>Username*: <input type="text" name="Username" pattern=".{3,}" title="3 or more characters"></p>
<p>Password*: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[A-Z]).{5,}"placeholder="Password must contain 1 uppercaser and 1 number and must be atleast 5 digits." title="Must contain at least one number and one uppercase letter, and at least 5 or more characters."></p>
</fieldset>
<fieldset>
<h1> Payment </h1>
<select id="paymentmethod" onchange="CreditCard();">
<option value ="Payment on pickup">Payment on pickup</option>
<option value="Bank transfer/deposit">Bank transfer/deposit</option>
<option value="Credit/Debit card">Credit/Debit card</option>
</select>
<fieldset>
<div id="credit/debit card" style="display: block;">
<select name="cardtype" class="form">
<option value="VISA">VISA</option>
<option value="MasterCard">MasterCard</option>
</select>
<br>Card Number*:<br>
<input type="text" name="cardnumber" pattern="(?=.*\d).{16,16}" title="Enter a 16-digit card number please." style="width:80%;" maxlength="20" value="" required>
<tr>
<td height="22" align="right" valign="middle">Expiry Date:</td>
<td colspan="2" align="left">
<SELECT NAME="CCExpiresMonth" >
<OPTION VALUE="01">January (01)
<OPTION VALUE="02">February (02)
<OPTION VALUE="03">March (03)
<OPTION VALUE="04"SELECTED>April (04)
<OPTION VALUE="05">May (05)
<OPTION VALUE="06">June (06)
<OPTION VALUE="07">July (07)
<OPTION VALUE="08">August (08)
<OPTION VALUE="09">September (09)
<OPTION VALUE="10">October (10)
<OPTION VALUE="11">November (11)
<OPTION VALUE="12">December (12)
</SELECT>
<SELECT NAME="CardExpiresYear">
<OPTION VALUE="04"SELECTED>2016
<OPTION VALUE="05">2017
<OPTION VALUE="06">2018
<OPTION VALUE="07">2019
<OPTION VALUE="08">2020
<OPTION VALUE="09">2021
<OPTION VALUE="10">2022
<OPTION VALUE="11">2023
<OPTION VALUE="12">2024
<OPTION VALUE="13">2025
</SELECT>
</td>
</tr>
</fieldset>
</fieldset>
<h1> Order Information </h1>
<p class="thick"> Name*: </p> <input type="text" id="customername" style="width:55% name="cardholder" value="" pattern=".{1,}" title="Please enter a name" required>
<p class="thick"> Adress*: </p> <input type="text"style="width:55;" name="cardholderadr" value="" pattern=".{3,}" title="Please enter an adress" required>
<p class="thick"> Phone </p> <input type="text"style="width:55;" pattern="(?=.*\d).{10,10}" title="Enter a 10 digit number please." name="cardholderpho" value="" >
<p class="thick"> email <input type="text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="Please enter a valid email adress" placeholder="example@email.com" >
<p class="thick"> Delivery comments </p> <input type="text" style="width:55; padding: 50px ;" name="cardholdercomm" value="" >
<p style="color:blue;"> I agree with the <a href="https://en.wikipedia.org/wiki/Terms_of_service">
*terms</a> <input type="radio" name="terms" title="Please agree to our terms." unchecked required onclick="terms();"></p>
<input type="submit" value="Submit" onclick="confirmed();">
<input type="button" onclick="reset()" value="Reset form">
</div>
</div>
</form>
<script>
function CreditCard() {
prefer = document.forms[0].paymentmethod.value;
if (prefer == "Credit/Debit card") {
document.getElementById("credit/debit card").style.visibility = "visible";
} else {
document.getElementById("credit/debit card").style.visibility = "hidden";
}
}
function paymentwithcard() {
document.getElementById("credit/debit card").style.visibility = "hidden";
}
function reset() {
document.getElementById("Myform").reset();
}
function confirmed() {
var x = document.getElementById("customername").value;
alert("Order completed.Name used:" + x);
}
function terms() {
}
</script>
</body>
</html>
身体{
边框：10px纯黑；
边缘顶部：100px；
边缘底部：100px；
右边距：150px；
左边距：150像素；
}
p、 浓密{
字体大小：粗体；
}
输入[类型=文本]，选择{
宽度：100%；
填充：20px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
输入[类型=文本]：焦点{
边框：3px实心#555；
}
输入[类型=密码]：焦点{
边框：3px实心#555；
}
输入[类型=密码]，选择{
宽度：100%；
填充：20px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
输入[类型=提交]{
宽度：100%；
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
}
输入[类型=提交]：悬停{
背景色：红色；
}
div{
边界半径：5px；
背景色：rgb（238238232）；
填充：40px；
}
登录
用户名*：
密码*：
付款
提货付款
银行转账/存款
信用卡/借记卡
签证
万事达卡
卡号*：
到期日：
一月（01）
二月（02）
三月(03)
四月（04）
五月（05日）
六月（06）
七月（07）
八月（08）
九月（09）
十月（10日）
11月（11日）
十二月（12日）
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
订单信息
Name*：
当您按submit时，将执行submit方法。
首先，您必须让submit方法等待comfirm方法可以执行，然后才能执行submit方法。
要访问js中的属性，可以使用id
document.getElementById（'submit-form'）.submit（函数（ev）{
ev.preventDefault（）；//停止表单提交
确认（）；
this.submit（）；//如果确认成功
});
按submit时，将执行submit方法。
首先，您必须让submit方法等待comfirm方法可以执行，然后才能执行submit方法。
要访问js中的属性，可以使用id
document.getElementById（'submit-form'）.submit（函数（ev）{
ev.preventDefault（）；//停止表单提交
确认（）；
this.submit（）；//如果确认成功
});
您正在侦听onclick，而应该侦听submit事件
不要只依赖客户端验证，这有利于干净的用户体验，但不要信任客户端
HTML5以必需和模式属性的形式提供了一些验证选项
window.addEventListener（'load'，function（）{
document.getElementById（'example-submit'）。addEventListener（'submit'，function（）{
警报（“完成”）；
});
});
输入：无效{边框：1px实心红色；}
输入：有效{边框：1px纯绿色；}
旁注
- 在您的代码中，
CreditCard
不是构造函数。考虑使用CAMEL案例名称<代码>信用卡< /代码>代替
- 如果你想得到高质量的答案，请尽量将问题中的代码减少到最低限度。几乎所有提供的HTML都与问题无关
- 我没有使用代码片段，因为此处嵌入的iframe不允许您提交fo
<input type="submit" value="Submit" onclick="return confirmed();">