Preventing form with jQuery

Question

I have a form with jQuery validation and I've created functions to return true or false if all fields are correctly filled. My problem is how and which function do I use to prevent a form from submitting, if my function returns false.

Thank you all in advance.

--- Edit ---

This is the function (a basic one) that I've made to check if all fields were filled correctly:

$("#btn_create").click(function(){

  $("input").each(function(){
    if($(this).css("border-color") == "rgb(249, 57, 57)"){
      check = false;
      return false;
    } else {
      check = true;
    }
  });

  if(check == false){
    $("#fill").fadeIn("slow");
  } else {
    $("#fill").fadeOut("slow");
  }
});

<form method="post" class="create">
  <div class="form-group col-lg-12">
    <input type="text" class="form-control" id="name" placeholder="Name">
  </div>

  <div class="form-group col-lg-12">
    <input type="email" class="form-control" id="email" placeholder="E-mail">
  </div>

  <div class="form-row">
    <div class="form-group col-lg-6">
      <input type="password" class="form-control" id="pass" placeholder="Password">
    </div>
    <div class="form-group col-lg-6">
      <input type="password" class="form-control" id="repass" placeholder="Retype Password">
    </div>
  </div>

  <div class="form-group col-lg-12">
    <input type="text" class="form-control" id="tlm" minlength="9" maxlength="9" placeholder="Contact">
  </div>

  <div class="form-group col-lg-12">
    <label class="label label-danger" id="fill">Please, fill all fields correctly!</label>
  </div>

  <div class="form-group col-lg-12 text-right">
    <button type="submit" id="btn_create" class="btn btn-primary">Sign in</button>
  </div>
</form>

When the fields are not filled correctly the border-color is red so I ended up doing some validation with that, if there are some input with border-color red, check = false.

PS.: Before asking this questions I've search for answers such as prevent default... Please do not say its duplicated because I've tried that one and for some reason didn't work.

You could just disable the button that submits the form while the form fields are empty. And yes please submit the code. — Walter Monecke, Sep 27 '17 at 11:49
Possible duplicate of [Prevent Default on Form Submit jQuery](https://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery) — Thusitha, Sep 27 '17 at 11:50
Look here [enter link description here](https://stackoverflow.com/questions/7194673/preventdefault-submitting-form) — azurinko, Sep 27 '17 at 12:08
Luckily there are people trying to help in this site instead of saying that is duplicated! @azurinko thanks man that worked — Bruno Gibellino, Sep 27 '17 at 12:15
@BrunoGibellino don't add irrelevant tags next time and also indent your code. — Rajendran Nadar, Sep 27 '17 at 12:29
@RajendranNadar wasn't it about form? wasn't it about validation? wasn't it about javascript? Didn't I use those in my code? So why are they irrelevant? But you are right about one thing I should've indented the code. — Bruno Gibellino, Sep 27 '17 at 12:51
@BrunoGibellino, talking this way, you should've also included bootstrap, input, tag, css, class, id, fadein, fadeout, grid, cycle and etc. tags. But it'd be weird. `javascript`, `jquery` and `html` tags are enough to sort your question. — voloshin, Sep 27 '17 at 15:40

score 0 · Accepted Answer · answered Sep 27 '17 at 12:14

$('#test').on('submit', function(e) {
  e.preventDefault();
  // do your custom stuffs and make a ajax call to submit it manually as per you requirement.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" method="POST">
  <input type="text" placeholder="Enter something" />
  <button>Submit</button>
</form>

Try this code it should work.

Preventing form with jQuery

1 Answers1