如标题所示，所需属性无效，因此我似乎无法验证我的表单。
我正在创建事件注册表。
我试过将每个元素封装在表单中，但这似乎不起作用。
我能做些什么来帮助解决这个问题？如果这个问题很幼稚，请原谅。我是初学者，我正在尽可能多地练习。
................................................ ..................................................... ..................................................... ...
<html>
<head>
<style>
* {
box-sizing: border-box;
}
text-danger {
color: #e74c3c;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: horizontal;
}
legend {
font: bold 1.0em Arial, Helvetica, sans-serif;
color: #00008B;
background-color: #FFFFFF;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
fieldset {
border: 1px solid #61B5CF;
margin-top: 1.4em;
padding: 0.6em;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
input:not([type=submit]):invalid {
background-color: #ffdddd;
}
input:not([type=submit]):valid {
background-color: #ddffdd;
}
input:not([type=submit]):invalid:required {
background: #ffdddd url('http://www.developerdrive.com/wp-content/uploads/2013/08/asterisk1.png') no-repeat right top;
}
input:not([type=submit]):valid:required {
background: #ddffdd url('http://www.developerdrive.com/wp-content/uploads/2013/08/asterisk1.png') no-repeat right top;
}
input:not([type=submit]):optional {
background-color: #add1ef;
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<h2> WIE ILS'19 Registration</h2>
<form novalidate="">
<fieldset>
<legend>Login Details</legend>
<div class="form-group">
<label class="col-md-2 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text" required>
</div>
</div>
</div>
<br></br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" >Password</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="password" name="password" id="password" onchange='check_pass();' required>
</div>
</div>
</div>
<br></br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" >Confirm Password</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="password" name="confirm_password" id="confirm_password" onchange='check_pass();' required>
</div>
</div>
</div>
<br></br>
</form>
</fieldset>
<form>
<fieldset>
<legend>Personal Information</legend>
<form>
<div class="form-group">
<label class="col-xs-2 control-label">First Name</label>
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="First Name" class="form-control" type="text" required>
</div>
</div>
</div>
</form>
<br></br>
<!-- Text input-->
<form>
<div class="form-group">
<label class="col-xs-2 control-label" >Last Name</label>
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="Last Name" class="form-control" type="text" required>
</div>
</div>
</div>
</form>
<br></br>
<!-- Text input-->
<form>
<div class="form-group">
<label class="col-md-2 control-label">Contact No.</label>
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="contact_no" placeholder="(+92)" class="form-control" type="text" required>
</div>
</div>
</div>
</form>
<br></br>
<form>
<div class="form-group">
<label class="col-md-2 control-label">CNIC No.</label>
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="contact_no" placeholder="No-Hyphens" class="form-control" type="text" id="message" required>
<p class="help-block text-danger"></p>
</div>
</div>
</div>
</form>
<br></br>
</fieldset>
</form>
<form novalidate="">
<fieldset>
<legend>Education Details</legend>
<form>
<div class="form-group">
<label class="col-xs-2 control-label">University/Institute</label>
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-education"></i></span>
<input name="first_name" placeholder="Institute Name" class="form-control" type="text" required>
</div>
</div>
</div>
</form>
<br></br>
<!-- Text input-->
<div class="form-group">
<label class="col-xs-2 control-label" >Degree Program </label>
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="Last Name" class="form-control" type="text" required>
</div>
</div>
</div>
<br></br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Semester</label>
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
<input name="contact_no" placeholder="" class="form-control" type="text" required>
</div>
</div>
</div>
<br></br>
</fieldset>
</form>
<form novalidate="">
<h5 style="font-weight:bold" >Do you need accomodation?</h5>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<br>
<br>
<button type="submit" name="submit" value="registration" id="submit" disabled>Submit</button>
</div>
</form>
<script >
function check_pass() {
if (document.getElementById('password').value ==
document.getElementById('confirm_password').value) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
}
</script>
</body>
</html>
最佳答案
为了使提交生效，您需要将其放入您要提交的表单中。还有其他方法可以做到这一点，但通常会结合 JavaScript 和 JQuery。它阻止您在表单内提交的原因是由于表单上的 novalidate 属性。只需删除它，您就可以开始了!
附言尽管该字段在前端是必需的，但那都是客户端，因此不难进入并更改它。在后端验证它总是一个好主意。将前端更多地视为建议，而不是最终裁决。
关于html - 为什么 "required"HTML 属性不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57739146/