为什么“必需” HTML属性不起作用？

时间：2019-08-31 15:07:16

标签： html css forms button bootstrap-4

如标题所示，必填属性不起作用，因此我似乎无法验证表单。

我正在创建活动注册表格。

我尝试将每个元素封装在表单中，但这似乎不起作用。

该怎么做才能帮助您？如果这个问题太幼稚，请原谅。我是一个初学者，我正在努力练习。

............................................... ................................................... ................................................... ... 

<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>

1 个答案:

答案 0 :(得分：1)

为了使提交工作正常进行，您需要将其放在您要提交的表单中。还有其他方法可以实现，但是通常都包含JavaScript和JQuery。但是，它阻止您在表单内提交时的原因是由于表单上的novalidate属性。只需删除它，您应该就可以开始使用！

P.S。即使该字段在前端是必需的，也就是所有客户端，所以进入并进行更改并不难。在后端也进行验证始终是一个好主意。将前端视为更多建议，而不是最终决定。

相关问题
最新问题