TAG
CSS
JavaScript
Result
Run
License
<form id="test-form" class="transmitted" method="post" action="/assist/example/http/form-receivers.php"> <label><input type="text" name="name" placeholder="any text" required /></label> <label><input type="radio" name="validate" value="y" checked />Validate</label> <label><input type="radio" name="validate" value="n" />InValidate</label> <span><input type="submit" value="Submit" /></span> </form>
#test-form { display: flex; flex-direction: column; row-gap: 10px; } .transmitted { padding: 30px 20px; position: relative; } .transmitted::before { content: "Transmit but not save"; position: absolute; background: #454545; top: 0; padding: 3px 10px; color: yellow; border-radius: 5px; }
document.addEventListener("DOMContentLoaded", () => { const $elTestForm = document.getElementById("test-form"); const $aElValidate = document.querySelectorAll("input[name='validate']"); const $elSubmit = document.querySelector("input[type='submit']"); $aElValidate.forEach(elValidate => elValidate.addEventListener("change", setValidate)); function setValidate(e) { let validate = e.currentTarget.value == "y" ? true : false; $elSubmit.formNoValidate = !validate; } $elTestForm.addEventListener("submit", e => { e.currentTarget.target = "_blank"; console.log(e.currentTarget.reportValidity()); }); $aElValidate[0].dispatchEvent(new Event("change")); });
Console
expand_less
License
License
by DevDic
Close