jQuery表单验证码和preventdefault不起作用

时间：2019-01-23 17:56:33

标签： javascript jquery

我已经创建了引导注册表单，并且以下jQuery代码无法正常工作。尽管e.preventDefault()仍在提交表单，并且包含错​​误消息的div也没有出现。

另外，我有一个登录表单，其中包含几乎完全相同的代码，并且运行正常

$(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 个答案:

答案 0 :(得分：0)

使用函数顶部的preventdefault。 调用Submit时，有一组在后台运行的功能。在Javascript中，当函数开始运行时，它无法停止。它仅在引发错误或返回值时停止。最后使用preventdefalut并没有帮助，因为为时已晚并且Submit函数已经开始运行。当放置在function的顶部时，它明确表示默认的提交功能将不运行。

$(function(){
  
$("#signup-form").on("submit",function(e){
  e.preventDefault();
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");
	
}


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

答案 1 :(得分：0)

验证失败时仅使用return false;（也preventDefault） 如下所示：

$(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();
    return false; // return false here to disallow from for submitting
}


});
});
相关问题
最新问题