[英]Client Side Form Validation not happening + can't edit form elements
I am not able to perform client-side form validation.我无法执行客户端表单验证。 It's a simple check.
这是一个简单的检查。 I wanna make sure that the passwords are the same.
我想确保密码相同。 This is the javascript code snippet that I am using for the same.
这是我正在使用的 javascript 代码片段。
$(document).ready(function(e) {
$("#reg-form").submit(function(event)) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
return true;
} else {
$error.text("Passwords don't match");
event.preventDefault();
}
}
})
Although, I don't think the problem is in the javascript code because I tried to style some items in the form and that didn't work either so I think it's an HTML issue.虽然,我不认为问题出在 javascript 代码中,因为我尝试设置表单中某些项目的样式,但也没有用,所以我认为这是一个 HTML 问题。 However, I can't pinpoint the issue.
但是,我无法确定问题所在。 This is my HTML Code.
这是我的 HTML 代码。
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
The following is the CSS code that I tried to work with.以下是我尝试使用的 CSS 代码。
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}
I found some issues with the JavaScript markup, had a few closing brackets missing and closing parentheses declared too early in the code;我发现 JavaScript 标记存在一些问题,缺少一些右括号,并且在代码中过早声明了右括号; but your code itself looks like it works with the correct markup on the JS, please see below:
但是您的代码本身看起来可以在 JS 上使用正确的标记,请参见下文:
$(document).ready(function() { $("#reg-form").submit(function(e) { let $password = $('#password'); let $confirm = $('#confirmPass'); let $error = $('#confirmError'); if ($password.val() === $confirm.val()) { console.log(true); return true } else { e.preventDefault(); $error.text("Passwords don't match"); } }) })
#reg-form input[type="text"], #reg-form input[type="email"] { border-radius: unset; border: none; border-bottom: 1px solid var(--color-border); font-family: var(--font-ubuntu); font-size: 18px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="d-flex justify-content-center"> <form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post"> <div class="form-row"> <div class="col"> <input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required> </div> <div class="col"> <input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required> </div> </div> <div class="form-row my-4"> <div class="col"> <input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required> </div> </div> <div class="form-row my-4"> <div class="col"> <input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required> </div> </div> <div class="form-row my-4"> <div class="col"> <input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required> <small id="confirmError" class="text-danger"></small> </div> </div> <div class="form-check form-check-inline"> <input type="checkbox" name="agreement" class="form-check-input" value="" required> <label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label> </div> <div class="submit-btn text-center my-5"> <button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button> </div> </form> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.