堆棧內存溢出
  簡體   English   中英

為什么“必需”HTML 屬性不起作用？

[英]Why is the "required" HTML attribute is not working?

 原文  2019-08-31 15:07:16  0   1    html/ css/ forms/ button/ bootstrap-4

問題描述

正如標題所暗示的， required 屬性不起作用，所以我似乎無法驗證我的表單。

我正在創建一個活動注冊表。

我嘗試將每個元素封裝在表單中，但這似乎不起作用。

我能做些什么來幫助解決這個問題？ 如果問題幼稚，請原諒。 我是初學者，我正在嘗試盡可能多地練習。

………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………

<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 個解決方案

解決方案1
 1 已采納  2019-08-31 15:15:37

為了使提交工作，您需要將其放入要提交的表單中。 還有其他方法可以做到這一點，但通常結合 JavaScript 和 JQuery。 它阻止您在表單內提交的原因是由於表單上的novalidate屬性。 只需刪除它，您就可以開始使用了！

PS即使前端需要該字段，但這都是客戶端，因此不難進入並更改它。 在后端驗證它總是一個好主意。 將前端更多地視為建議，而不是最終裁決。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 必需的屬性不適用於html形式 所需的 HTML Bootstrap 屬性不起作用 必需的屬性不起作用。 (html) html required屬性不適用於只讀 在 HTML 表單中，“required”屬性不起作用 Html 必需屬性不適用於按鈕功能 HTML 必需屬性不適用於 AJAX 提交 HTML必需的屬性在簡單的Input上不起作用 為什么所需的屬性在 HTML 中對我不起作用 為什么要求的屬性不適用於 HTML 中的輸入？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM