如何對指定的表單字段使用 preventDefault()？
[英]how to use preventDefault() for specified form fields?
問題描述
我的任務是在使用 HTML 和 CSS 之前創建的表單上使用 preventDefault()。 我不確定如何使用 preventDefault() 以及如何僅將其用於我的任務要求的字段。
需要通過 preventDefault() 過程 go 的字段是名稱、email 地址、地址和郵政編碼，未選中“通知我”框。
form{ background-color: rgb(190, 231, 190); padding: 5pt; margin: 0 auto; width:30%; border: 1pt solid black; } legend{ background-color: rgb(134, 97, 28); margin: auto; padding-inline: 20%; padding-top: 2pt; padding-bottom: 2pt; color: white; } fieldset{ padding: 10pt; } #p1, #p3{ background-color: white; padding: 5pt; } #p3{ padding-left: 30%; padding-right: 25%; } #p3 input{ background-color: rgb(134, 97, 28); border-radius: 7pt; color: white; padding: 5pt; width: 75pt; }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Topic 4: Exercise 4 (Miguel Divo)</title> </head> <body> <form> <fieldset> <legend>Shirt Order Form</legend> <p> <label>Shirt Size</label> </p> <p> <select name="shirt_size" > <option>Choose Size</option> <option>XS</option> <option>S</option> <option>M</option> <option>L</option> <option>XL</option> </select> </p> <p> <label>Sleeves</label> </p> <p> <input type="radio" name="sleeve" value="1" >Short<br> <input type="radio" name="sleeve" value="2" >Long<br> </p> <p> <label>Choose Shirt Colour</label> </p> <p> <input type="color" name="colourChoice" > </p> <p> <label>Quantity</label> </p> <p> <input type="number" name="quantity" > </p> <p> <label>Date Requested</label> </p> <p> <input type="date" name="date" > </p> </fieldset> <br> <fieldset> <p> <label>Name</label> </p> <p> <input type="text" name="name" > </p> <p> <label>Email</label> </p> <p> <input type="email" name="email" > </p> <p>Telephone Number</p> <p> <input type="text" name="phone" pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}" > Example. 44-207-882-1234 </p> </fieldset> <br> <fieldset> <p> <label>Address</label> </p> <p> <input type="text" name="address" > </p> <p> <label>City</label> </p> <p> <input type="text" name="city" list="cities" > <datalist id="cities"> <option>Birmingham</option> <option>Glasgow</option> <option>London</option> <option>Manchester</option> </datalist> </input> </p> <p> <label>Postcode</label> </p> <p> <input type="text" name="postcode" > </p> </fieldset> <br> <p id="p1"> Please keep me informed about future shirt designs<input type="checkbox" name="accept"> </p> <p id="p3"> <input type="submit"> <input type="reset" value="Clear Form"> </p> </form> <script src="preventDefault.js"></script> </body> </html>
2 個解決方案
解決方案1
1 已采納 2021-03-24 12:53:08
如果您想在未填寫特定字段時使用 preventDefault 阻止表單提交
window.addEventListener("load", function() { const orderForm = document.getElementById("orderForm") orderForm.addEventListener("submit", function(event) { if (orderForm.querySelector("[name=accept]").checked) { const valid = ["name", "email", "address", "address", "postcode"].filter(fieldName => orderForm.querySelector("[name=" + fieldName + "]").value === "").length === 0; // count empty if (.valid) { console.log("empty fields") event.preventDefault() } } }) })
form { background-color: rgb(190, 231, 190); padding: 5pt; margin: 0 auto; width: 30%; border: 1pt solid black; } legend { background-color: rgb(134, 97, 28); margin: auto; padding-inline: 20%; padding-top: 2pt; padding-bottom: 2pt; color: white; } fieldset { padding: 10pt; } #p1, #p3 { background-color: white; padding: 5pt; } #p3 { padding-left: 30%; padding-right: 25%; } #p3 input { background-color: rgb(134, 97, 28); border-radius: 7pt; color: white; padding: 5pt; width: 75pt; }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Topic 4: Exercise 4 (Miguel Divo)</title> </head> <body> <form id="orderForm"> <fieldset> <legend>Shirt Order Form</legend> <p> <label>Shirt Size</label> </p> <p> <select name="shirt_size"> <option>Choose Size</option> <option>XS</option> <option>S</option> <option>M</option> <option>L</option> <option>XL</option> </select> </p> <p> <label>Sleeves</label> </p> <p> <input type="radio" name="sleeve" value="1">Short<br> <input type="radio" name="sleeve" value="2">Long<br> </p> <p> <label>Choose Shirt Colour</label> </p> <p> <input type="color" name="colourChoice"> </p> <p> <label>Quantity</label> </p> <p> <input type="number" name="quantity"> </p> <p> <label>Date Requested</label> </p> <p> <input type="date" name="date"> </p> </fieldset> <br> <fieldset> <p> <label>Name</label> </p> <p> <input type="text" name="name"> </p> <p> <label>Email</label> </p> <p> <input type="email" name="email"> </p> <p>Telephone Number</p> <p> <input type="text" name="phone" pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}"> Example. 44-207-882-1234 </p> </fieldset> <br> <fieldset> <p> <label>Address</label> </p> <p> <input type="text" name="address"> </p> <p> <label>City</label> </p> <p> <input type="text" name="city" list="cities"> <datalist id="cities"> <option>Birmingham</option> <option>Glasgow</option> <option>London</option> <option>Manchester</option> </datalist> </input> </p> <p> <label>Postcode</label> </p> <p> <input type="text" name="postcode"> </p> </fieldset> <br> <p id="p1"> Please keep me informed about future shirt designs<input type="checkbox" name="accept"> </p> <p id="p3"> <input type="submit"> <input type="reset" value="Clear Form"> </p> </form> <script src="preventDefault.js"></script> </body> </html>
這也可以通過簡單地在每個有問題的標簽上添加 required 來實現
window.addEventListener("load", function() { const orderForm = document.getElementById("orderForm") orderForm.querySelector("[name=accept]").addEventListener("change", function() { const req = this.checked; ["name", "email", "address", "address", "postcode"].forEach(fieldName => orderForm.querySelector("[name=" + fieldName + "]").required = req); }) })
form { background-color: rgb(190, 231, 190); padding: 5pt; margin: 0 auto; width: 30%; border: 1pt solid black; } legend { background-color: rgb(134, 97, 28); margin: auto; padding-inline: 20%; padding-top: 2pt; padding-bottom: 2pt; color: white; } fieldset { padding: 10pt; } #p1, #p3 { background-color: white; padding: 5pt; } #p3 { padding-left: 30%; padding-right: 25%; } #p3 input { background-color: rgb(134, 97, 28); border-radius: 7pt; color: white; padding: 5pt; width: 75pt; }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Topic 4: Exercise 4 (Miguel Divo)</title> </head> <body> <form id="orderForm"> <fieldset> <legend>Shirt Order Form</legend> <p> <label>Shirt Size</label> </p> <p> <select name="shirt_size"> <option>Choose Size</option> <option>XS</option> <option>S</option> <option>M</option> <option>L</option> <option>XL</option> </select> </p> <p> <label>Sleeves</label> </p> <p> <input type="radio" name="sleeve" value="1">Short<br> <input type="radio" name="sleeve" value="2">Long<br> </p> <p> <label>Choose Shirt Colour</label> </p> <p> <input type="color" name="colourChoice"> </p> <p> <label>Quantity</label> </p> <p> <input type="number" name="quantity"> </p> <p> <label>Date Requested</label> </p> <p> <input type="date" name="date"> </p> </fieldset> <br> <fieldset> <p> <label>Name</label> </p> <p> <input type="text" name="name"> </p> <p> <label>Email</label> </p> <p> <input type="email" name="email"> </p> <p>Telephone Number</p> <p> <input type="text" name="phone" pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}"> Example. 44-207-882-1234 </p> </fieldset> <br> <fieldset> <p> <label>Address</label> </p> <p> <input type="text" name="address"> </p> <p> <label>City</label> </p> <p> <input type="text" name="city" list="cities"> <datalist id="cities"> <option>Birmingham</option> <option>Glasgow</option> <option>London</option> <option>Manchester</option> </datalist> </input> </p> <p> <label>Postcode</label> </p> <p> <input type="text" name="postcode"> </p> </fieldset> <br> <p id="p1"> Please keep me informed about future shirt designs<input type="checkbox" name="accept"> </p> <p id="p3"> <input type="submit"> <input type="reset" value="Clear Form"> </p> </form> <script src="preventDefault.js"></script> </body> </html>
解決方案2
0 2021-03-24 12:39:42
你可以這樣做：
<html>
<head>
<title>ejemplo de preventDefault</title>
<script type="text/javascript">
function stopDefAction(evt) {
evt.preventDefault();
}
</script>
</head>
<body>
<p>click on the box.</p>
<form>
<input type="checkbox" onclick="stopDefAction(event);"/>
<label for="checkbox">Select</label>
</form>
</body>
</html>
參考： https://developer.mozilla.org/es/docs/Web/API/Event/preventDefault
如何在表單提交中使用帶有setTimeout和preventDefault的blockUI？
[英]How to use blockUI with setTimeout and preventDefault on form submit?
當我們使用e.preventDefault（）時，如何在表單中使用“ required”屬性？
[英]How to use “required” attribute in a form, when we use e.preventDefault()?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何自動觸發提交表單並使用preventDefault
如何在表單提交中使用帶有setTimeout和preventDefault的blockUI？
如何以及何時使用preventDefault（）？
formspree 如何使用 preventDefault()？
如何提交表單並繞過 preventDefault
如何對<a>表行中的 a</a>使用 preventDefault
如何在 contenteditable div 中使用 preventDefault？
提交表單時使用 preventDefault 代碼不起作用
當我們使用e.preventDefault（）時，如何在表單中使用“ required”屬性？
如何獲取指定表單內所有字段的ID？
相關標簽