Question posted in 
I have created a bootstrap signup form and the following jQuery code is not working. Despite the e.preventDefault() , the form is still being submitted, and the div containing the error message does not appear either.
Also, I have a login form with pretty much the exact same code and that one is working properly
$(function(){
$("#signup-form").on("submit",function(e){
var email=$("#emal");
var name=$("#username");
var ps=$("#password");
var psr=$("#passwordrepeat");
var error=$("#errormessage");
var errorcontainer=$("#errordiv");
if(name.val()=="" && ps.val()=="" && email.val()=="" && psr.val()==""){
error.text("Fields are empty!");
errorcontainer.removeClass("d-none");
errorcontainer.addClass("errorbg");
name.addClass("error");
ps.addClass("error");
email.addClass("error");
psr.addClass("error");
e.preventDefault();
}
});
});body{
background:#9ec3ff !important;
}
.container{
background:#9ec3ff;
}
.col-lg-6{
margin:auto;
}
#facebook{
background:#568ac2 !important;
border:none;
border-radius:2px !important;
}
#twitter{
background:#6aabdb;
border:none;
border-radius:2px !important;
}
#google{
background:#cb3d2f;
border:none;
border-radius:2px !important;
}
#signupform{
box-shadow:0px 0px 10px #2e51a2;
}
#signupform:hover{
box-shadow:0px 0px 50px #2e51a2;
transition:0.5s;
}
.error{
box-shadow:0px 0px 10px #cb3d2f;
}
.errorbg{
border:2px solid red;
background:#fae3e3;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="signup.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' crossorigin='anonymous'>
<link rel="stylesheet" type="text/css" href="signup.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<div class="container">
<div id="errordiv" class="m-auto text-danger font-weight-bold text-center col-lg-6 col-md-8 d-none">
<span id="errormessage"></span>
</div>
<div class="row mt-5">
<div id="signupform" class="col-lg-6 col-md-8 border border-primary text-center">
<span class="m-auto"><strong>Sign Up with</strong></span><br><br>
<div class="m-auto col-xl-10 col-lg-11 col-md-11 col-sm-10">
<button type="button" id="facebook" class="btn btn-primary float-left"><img class="mr-3" src="https://i.imgur.com/9FWWsfx.png"/>Facebook</button>
<button type="button" id="twitter" class="btn btn-primary float-center"><img class="mr-3" src="https://i.imgur.com/LXFDLev.png"/>Twitter</button>
<button type="button" id="google" class="btn btn-primary float-right"><img class="mr-3" src="https://i.imgur.com/AN3CMg9.png"/>Google+</button>
</div>
<br>
<span class="m-auto">Or</span><br>
<br>
<form id="signup-form">
<fieldset class="form-group">
<label for="formGroupExampleInput"><strong>E-mail</strong></label>
<input type="text" class="form-control w-75 m-auto" id="email" placeholder="Enter email" name="signup-email">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Username</label>
<input type="text" class="form-control w-75 m-auto" id="username" placeholder="Choose username" name="signup-username">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control w-75 m-auto" id="password" placeholder="Enter password" name="signup-password">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Password again</label>
<input type="password" class="form-control w-75 m-auto" id="passwordrepeat" placeholder="Enter password" name="signup-passwordrepeat">
</fieldset>
<div class="checkbox">
<label>
<input type="checkbox"> I have read and agree to the <a href="#">Term of Service</a> and <a href="#">Privacy Policy</a>
</label>
</div>
<input type="submit" name="signup" class="btn btn-primary mb-3" value="Create Account"/>
</form>
</div>
</div>
</div>
</body>
</html>
2
Answers
Use the
preventdefaulton top of the function.There are a set of functions which are run in the background when submit is called. In
Javascriptwhen a function starts running there is no way it could stop. It only stops when it throws an error or if it returns a value. Usingpreventdefalutat the last doesn’t help because it is too late and the submit function has began to run. When placed at the top of thefunctionit explicitly says that the default submit functions aren’t to be run.Simply use
return false;when validation fails (andpreventDefaultas well)like following: