jQuery submit callback not working
Question
It's been a day since I have been trying to figure out why my form validation is not working. From my side, every part of the code is good. Basically, I am trying to verify if the two passwords entered by the user match while creating an account. If yes, the POST method is run. If not, an alert is displayed. But when I run it, nothing is validated, in both the cases (matching password or not).
Need a possible reason behind the code not working. Here is the code:
<body>
<div class="container">
<div class="row">
<h2>Hi! Welcome to our JCLOUD File Sharing Service. Please singup to start uploading files</h2>
</div>
<div class="row" id="signup-row">
<div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
<h3>JCloud File Sharing - Signup <small></small></h3>
<hr>
<form action="register" method="post" id="signup-form">
<div class="form-group">
<label for="username">Enter a username:</label>
<input type="text" class="form-control" name="username" />
</div>
<div class="form-group">
<label for="email">Enter your e-mail address:</label>
<input type="email" class="form-control" name="email" />
</div>
<div class="form-group">
<label for="password">Choose a password:</label>
<input type="password" class="form-control" name="password" id="password-value" />
</div>
<div class="form-group">
<label for="password2">Confirm password:</label>
<input type="password" class="form-control" name="password2" id="password-value2" />
</div>
<button type="submit" class="btn btn-primary btn-block">Create Account</button>
</form>
<p>${requestScope["message"]}</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script>
$('#signup-form').submit(function() {
var pass1 = $("#password-value").val();
var pass2 = $("#password-value2").val();
if( pass1 == pass2 ) {
var encrypted = CryptoJS.SHA256($("#password-value").val());
$("#password-value").val(encrypted);
var encrypted2 = CryptoJS.SHA256($("#password-value2").val());
$("#password-value2").val(encrypted2);
return true;
}
else{
$("#signup-row").before("<div class='row'>" +
"<div class='col-xs-12 col-sm-12 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4'>" +
"<div class="alert alert-danger"><strong>Error!</strong> The passwords you entered don not match." +
"</div>" +
"<div>" +
"</div> ");
return false;
}
});
</script>
</body>
1 answers
solution1
1 ACCPTED 2017-04-25 14:35:13
In the before function you typed a dual quote " for the danger div.
Here is a correct syntax:
$("#signup-row").before("<div class='row'>" +
"<div class='col-xs-12 col-sm-12 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4'>" +
"<div class='alert alert-danger'><strong>Error!</strong> The passwords you entered don not match." +
"</div>" +
"<div>" +
"</div> ");
I tested it out, it works now!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.