阻止使用脚本发送表单

Question

我有发送数据的html表单。action ="script.php"

我想防止表单与JS一起发送，但它什么都不做并发送数据。纳斯洛夫 = 头衔

This is html:

<form name = "my_form" enctype="multipart/form-data"  method = "POST" action = "skripta.php">

    <div class="form-group row  ">

         <div class="col-md-6">

             <span id="porukaTitle" class="bojaPoruke"></span> 

             <label  for="naslov">Naslov</label>

             <input  type="text"  name="naslov" class="form-control" id="naslov">

         </div>

</form>

这是 JS：

<script type="text/javascript">

     document.getElementById("slanje").onclick = function (event) {

       var slanjeForme=true;

       var poljeTitle=document.getElementById("naslov");

       var naslov=document.getElementById("naslov").value;

       if (naslov.lenght < 5 || naslov.lenght > 30) {

          slanjeForme=false;

          poljeTitle.style.border="1px dashed red";

          document.getElementById("porukaTitle").innerHTML="Naslov vjesti mora imati između 5 i 30 znakova!<br>"; 

       } else { 

          poljeTitle.style.border="1px solid green";          

          document.getElementById( "porukaTitle").innerHTML="";                    

       }

       if (slanjeForme != true) {

        event.preventDefault();

       }            

     }

</script>

问题是它总是发送数据。

Answer 1

不要使用“单击”处理程序，而是使用 FORM 的事件处理程序！"submit"创建一个漂亮的可重用验证函数，该函数还将使用&nbsp;classList.toggle（）&nbsp;处理输入样式使用所需的验证程序填充函数validate最后使用&nbsp;CSS&nbsp;来处理错误边框和消息可见性使用类is-error始终将错误SPAN元素作为所需操作元素的同级元素放置，这样当输入获得时，我们可以使用CSS的常规同级组合器来定位它〜.is-error无论你有多少个输入，你都不需要编写额外的JS逻辑。只需验证所需的那些，例如const has_err = validate(EL("#foo"), "length");const validate = (el, validatorName = "length") => {&nbsp; const val = el.value.trim();&nbsp; const isErr = {&nbsp; &nbsp; // Basic, validates if there's value&nbsp; &nbsp; length: () => val.length < 1,&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Validate between 5 and 30 charaters&nbsp; &nbsp; length_5_30: () => val.length < 5 || val.length > 30,&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Add more validators&nbsp; &nbsp;&nbsp;&nbsp; }[validatorName]();&nbsp;&nbsp;&nbsp; el.classList.toggle("is-error", isErr);&nbsp; return isErr;};const EL = (sel, EL) => (EL || document).querySelector(sel);EL("#my_form").addEventListener("submit", function(event) {&nbsp; const err_1 = validate(EL("#naslov"), "length_5_30");&nbsp; const err_2 = validate(EL("#bla"), "length");&nbsp; if (err_1 || err_2) {&nbsp; &nbsp; event.preventDefault();&nbsp; }});form .is-error {&nbsp; outline: 1px dashed red;}form .error-message {&nbsp; display: none;&nbsp; color: red;}form .is-error ~ .error-message {&nbsp; display: block;}<form id="my_form" name="my_form" enctype="multipart/form-data" method="POST" action="skripta.php">&nbsp; <div class="form-group row">&nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; <label for="naslov">Naslov</label>&nbsp; &nbsp; &nbsp; <input type="text" id="naslov" name="naslov" class="form-control">&nbsp; &nbsp; &nbsp; <span class="error-message">Naslov vjesti mora imati između 5 i 30 znakova!</span>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="form-group row">&nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; <label for="naslov">Bla bla</label>&nbsp; &nbsp; &nbsp; <input type="text" id="bla" name="bla" class="form-control">&nbsp; &nbsp; &nbsp; <span class="error-message">Ovo polje ne može biti prazno!</span>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <button type="submit">Pošalji</button></form>

Answer 2

应改用表单验证函数。在表单中，添加一个名为“提交时”的属性。表单应如下所示：<form&nbsp;onsubmit="return&nbsp;checkBeforeSubmitting()"></form>然后，您可以在发送数据之前运行函数。如果您不希望发送数据，请在特定条件下使“在提交之前检查（）”返回为假。链接到有关如何使用此功能的更多信息：https://www.w3schools.com/js/js_validation.asp

Answer 3

阻止表单提交的最好方法是挂接到其事件中，并在 java 脚本中执行此操作，而不是将 java 脚本添加到 html 中。它看起来像这样：submitvar form = document.querySelector('form.myform');form.addEventListener('submit', e => {&nbsp; // put your conditional here&nbsp; if( please_dont_submit == true ) {&nbsp; &nbsp; e.preventDefault();&nbsp; }&nbsp;&nbsp;&nbsp; // else form will submit;&nbsp;});<form class="myform">&nbsp; &nbsp;<!-- form stuff -->&nbsp; &nbsp;<input type="submit" value="Submit"></form>在完成之后，您可能还希望从表单本身内部提交表单。您可以通过设置一个标志来指示检查已被处理来执行此操作：preventDefault()const form = document.querySelector('form.myform');var okToSubmit = false;form.addEventListener('submit', e => {&nbsp; &nbsp; // put your conditional here&nbsp; &nbsp; if( please_dont_submit == true && ! okToSubmit ) {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; // do some further processing and submit again.&nbsp; &nbsp; &nbsp; &nbsp; okToSubmit = true;&nbsp; &nbsp; &nbsp; &nbsp; e.target.submit();&nbsp; &nbsp; }&nbsp; &nbsp; // else form will submit;&nbsp;});