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

【问题标题】：Why is the "required" HTML attribute is not working?为什么“必需”的 HTML 属性不起作用？
【发布时间】：2020-01-04 10:34:12
【问题描述】：

正如标题所暗示的，所需的属性不起作用，所以我似乎无法验证我的表单。

我正在创建一个活动注册表。

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

我能做些什么来帮助解决这个问题？如果这个问题很幼稚，请原谅。我是初学者，我正在尝试尽可能多地练习。

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

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

【问题讨论】：

    标签： html css forms button bootstrap-4


    【解决方案1】：

    为了使提交工作，您需要将其放入您要提交的表单中。还有其他方法可以做到这一点，但通常包含 JavaScript 和 JQuery。它阻止您在表单内提交的原因是由于表单上的novalidate 属性。只需删除它，您就可以开始使用了！

    附：尽管该字段在前端是必需的，但那都是客户端，因此不难进入并更改它。在后端验证它总是一个好主意。将前端更多地视为建议，而不是最终裁决。

    【讨论】：

      猜你喜欢
      • 2023-01-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-09-05
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode