我有这个片段代码，它将在 span 中显示一些错误每当用户输入不正确的字段时标记。而不是使用 required ，当用户将其留空时，我希望我的提交表单能够验证并显示 alert消息说'Please check and input correct fields'提交之前。如果用户输入一些正确的数据，它将显示一条消息 'Form Ok' 。有没有正确的方法来执行此操作？传递函数onsubmit="return validateForm();" .
请帮忙。
function validateForm()
{
//Prompts the to correct all fields. How??
}
//Checks password function
function checkPasswordMatch() {
var password = $("#createpassword").val();
var confirmPassword = $("#confirmpassword").val();
if ((password && confirmPassword) == "") {
$("#divCheckPasswordMatch").html("");
} else if (password != confirmPassword) {
$("#divCheckPasswordMatch").html("Password do not match!");
$("#divCheckPasswordMatch").css("color", "red");
} else {
$("#divCheckPasswordMatch").html("Password match.");
$("#divCheckPasswordMatch").css("color", "green");
}
}
//trigger keyup event in function checkPasswordMatch
$(document).ready(function() {
$("#createpassword, #confirmpassword").keyup(checkPasswordMatch);
});
//Add an Email Regular Expression and pass it to function validate
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
//Email Validate function
function validate() {
var email = $("#email").val();
if (validateEmail(email)) {
$("#checkEmail").text("");
} else
{
$("#checkEmail").text("Please enter a valid email address");
$("#checkEmail").css("color", "red");
}
}
//Call the function validate in blur event Jquery
$(document).ready(function(){
$("#email").blur(validate);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<form action="SignupProcess.php" method="POST" onsubmit="return validateForm();" id="signupform">
<fieldset>
<!-- Email Address field -->
<div class="form-group">
<input class="form-control" placeholder="Email" name="email" id="email" type="email" required>
<span id="checkEmail"></span>
</div>
<!-- Password input button -->
<div class="form-group">
<input class="form-control" placeholder="Create Password" name="createpassword" oninvalid="setCustomValidity('Please enter a password')" oninput="setCustomValidity('')" id="createpassword" type="password" required>
</div>
<!-- Confirm password input button -->
<div class="form-group">
<input class="form-control" placeholder="Confirm Password" name="confirmpassword" oninvalid="setCustomValidity('Please match your password')" oninput="setCustomValidity('')" id="confirmpassword" type="password" required>
<span class="registrationFormAlert" id="divCheckPasswordMatch"></span>
</div>
<!-- Submit input button -->
<div class="form-group">
<input type="submit" id="signup" name="signupsubmit" class="btn btn-info form-control" value="Register">
</div>
</fieldset>
</form>
</body>
</html>最佳答案
尝试删除表单中的onsubmit，添加使用以下代码替换它:
$('input[type="submit"]').click(function(e){
//validate form
var condition = validateForm(); //return true or false
if(condition){
alert('Form OK!');
}
//stop submission
else{
alert('Please check and input correct fields!');
e.preventDefault();
return false;
}
});
希望有帮助 =)
关于javascript - 如何使用 javascript 提醒用户在表单验证中更正输入字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39163561/