Prevent sending form with JavaScript

Question

I have html form with action ="script.php" which sends data.

I want prevent form to being sent with JS but it does nothing and sends data. Naslov = title

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>

And this is 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>

Problem is that it always sends data.

Answer 1

• Don't use the "click" handler, instead use the FORM's "submit" Event handler!
• Create a nifty reusable validate function that will also handle the input style using classList.toggle()
• Populate your validate function with the needed validators
• Use finally CSS to handle error borders and messages visibility using the class is-error
• Always place the error SPAN elements as siblings to a desired action element, that way when an input gets the .is-error we can target it using the CSS's General Sibling Combinator ~

No matter how many inputs you have, you don't need to write extra JS logic. Just validate the desired ones like 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

The best way to stop a form from submitted is to hook into its submit event, and do so in the javascript, rather than add javascript into the html. That would look like this:

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>

You may also wish to submit the form from within itself, after doing the preventDefault(). You can do that by setting a flag to indicate that the check has already been processed:

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; 
});

Answer 3

You should use a form validation function instead. In your form, add an attribute called "onsubmit". The form should look similar to this:

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

Then, you can have a function run before data is sent. If you don't want data to be sent, make the "checkBeforeSubmitting()" return false under a certain condition.

Link to more info on how to use this: https://www.w3schools.com/js/js_validation.asp