阻止使用脚本发送表单

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"

• 创建一个漂亮的可重用验证函数，该函数还将使用 classList.toggle（） 处理输入样式

• 使用所需的验证程序填充函数validate

• 最后使用 CSS 来处理错误边框和消息可见性使用类is-error

• 始终将错误SPAN元素作为所需操作元素的同级元素放置，这样当输入获得时，我们可以使用CSS的常规同级组合器来定位它〜.is-error

无论你有多少个输入，你都不需要编写额外的JS逻辑。只需验证所需的那些，例如const has_err = validate(EL("#foo"), "length");

const validate = (el, validatorName = "length") => {

  const val = el.value.trim();

  const isErr = {

    // Basic, validates if there's value

    length: () => val.length < 1,

    

    // Validate between 5 and 30 charaters

    length_5_30: () => val.length < 5 || val.length > 30,

    

    // Add more validators

    

  }[validatorName]();

  

  el.classList.toggle("is-error", isErr);

  return isErr;

};

const EL = (sel, EL) => (EL || document).querySelector(sel);

EL("#my_form").addEventListener("submit", function(event) {

  const err_1 = validate(EL("#naslov"), "length_5_30");

  const err_2 = validate(EL("#bla"), "length");

  if (err_1 || err_2) {

    event.preventDefault();

  }

});

form .is-error {

  outline: 1px dashed red;

}

form .error-message {

  display: none;

  color: red;

}

form .is-error ~ .error-message {

  display: block;

}

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

  <div class="form-group row">

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

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

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

      <span class="error-message">Naslov vjesti mora imati između 5 i 30 znakova!</span>

    </div>

  </div>

  <div class="form-group row">

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

      <label for="naslov">Bla bla</label>

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

      <span class="error-message">Ovo polje ne može biti prazno!</span>

    </div>

  </div>

  <button type="submit">Pošalji</button>

</form>

Answer 2

应改用表单验证函数。在表单中，添加一个名为“提交时”的属性。表单应如下所示：

<form onsubmit="return checkBeforeSubmitting()"></form>

然后，您可以在发送数据之前运行函数。如果您不希望发送数据，请在特定条件下使“在提交之前检查（）”返回为假。

链接到有关如何使用此功能的更多信息：https://www.w3schools.com/js/js_validation.asp

Answer 3

阻止表单提交的最好方法是挂接到其事件中，并在 java 脚本中执行此操作，而不是将 java 脚本添加到 html 中。它看起来像这样：submit

var form = document.querySelector('form.myform');

form.addEventListener('submit', e => {

  // put your conditional here

  if( please_dont_submit == true ) {

    e.preventDefault();

  }

  

  // else form will submit; 

});

<form class="myform">

   <!-- form stuff -->

   <input type="submit" value="Submit">

</form>

在完成之后，您可能还希望从表单本身内部提交表单。您可以通过设置一个标志来指示检查已被处理来执行此操作：preventDefault()

const form = document.querySelector('form.myform');

var okToSubmit = false;

form.addEventListener('submit', e => {

    // put your conditional here

    if( please_dont_submit == true && ! okToSubmit ) {

        e.preventDefault();

        // do some further processing and submit again.

        okToSubmit = true;

        e.target.submit();

    }

    // else form will submit; 

});