我的代码问题是验证工作不正确，即;如果我们输入第一个名称，它会显示错误消息“名称应该是3个字符”，但它不会禁用提交按钮，因为所有字段都显示错误消息，但它已成功提交。所以帮助我它是只有在所有验证都正确时才提交。我正在正确编写代码，但我不明白问题出在哪里。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Signika');
.nopadding {
padding: 0px;
}
.align {
margin-left: 50%;
}
.inputtop {
font-family: 'Signika', sans-serif;
margin-top: 10px;
}
.signup {
font-family: 'Signika', sans-serif;
text-align: center;
color: #31d3fb;
font-size: 50px;
height: 50px;``
}
.set {
padding-right: 0px;
padding-left: 0px;
}
.copyright {
margin-top: 33px;
}
.panel-primary {
border-color: #fff;
}
.panel-primary>.panel-heading {
background: #bce8f1;
}
.panel-primary>.panel-body {
background-color: #fff;
}
</style>
</head>
<div>
<div class="col-md-7 nopadding color">
<img src="images/energywallpaper2.jpg" width="100%" height="920px" alt="">
</div>
<div class="col-md-5 color">
<div class="panel panel-primary">
<h1 class="signup">Signup</h1>
<div class="panel-body">
<form name="myform" method="post">
<div class="form-group">
<label for="fname">First Name *</label>
<input id="fname" name="fname" class="form-control" type="text" data-validation="required">
<span id="error_name" class="text-danger"></span>
</div>
<div class="form-group">
<label for="lname">Last Name *</label>
<input id="lname" name="lname" class="form-control" type="text" data-validation="email">
<span id="error_lname" class="text-danger"></span>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="text" id="email" name="email" class="form-control">
<span id="error_email" class="text-danger"></span>
</div>
<div class="form-group">
<label for="password">Password *</label>
<input type="password" id="password" name="password" class="form-control">
<span id="error_password" class="text-danger"></span>
</div>
<div class="form-group">
<label for="password">Confirm password *</label>
<input type="password" id="cpassword" name="cpassword" class="form-control">
<span id="error_cpassword" class="text-danger"></span>
</div>
<div class="form-group">
<label for="disc">Private Notes</label>
<textarea class="form-control" rows="3" col="50"></textarea>
</div>
<div class="form-group">
<label for="disc">Visible Notes</label>
<textarea class="form-control" rows="3" col="50"></textarea>
</div>
<div class="form-group">
<label for="dob">Date Of Birth *</label>
<input type="text" name="dob" id="dob" class="form-control">
<span id="error_dob" class="text-danger"></span>
</div>
<button id="submit" type="submit" value="submit" class="btn btn-primary center">Submit</button>
<div class="clearfix"></div>
<div class="separator">
<p class="change_link">Already a member ?
<a href="#signin" class="to_register"> Log in </a>
</p>
<div class="clearfix"></div>
<br />
<div>
<p class="copyright">AMK website©2017 All Rights Reserved.</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$("#dob").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy",
yearRange: "-90:+00"
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$flag = 1;
$("#fname").focusout(function() {
if ($(this).val() == '') {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_name").text("* You have to enter your first name!");
} else if ($(this).val().length < 3) {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_name").text("*You have to enter minimum 3 characters of your first name!");
} else {
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled', false);
$("#error_name").text("");
}
});
$("#lname").focusout(function() {
if ($(this).val() == '') {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_lname").text("* You have to enter your Last name!");
} else if ($(this).val().length < 3) {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_lname").text("*You have to enter minimum 3 characters of your last name!");
} else {
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled', false);
$("#error_lname").text("");
}
});
$("#dob").focusout(function() {
if ($(this).val() == 'null') {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_dob").text("* You have to enter your Date of Birth!");
} else {
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled', false);
$("#error_dob").text("");
}
});
$("#email").focusout(function() {
var email = $("#email").val();
var pattern = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
if ($(this).val() == "") {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_email").text("* You have to enter your email!");
} else if (!pattern.test(email)) {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_email").text("* Please enter valid email");
} else {
console.log("success");
$(this).css({
"border-color": "#2eb82e"
});
$('#submit').attr('disabled', false);
$("#error_email").text("");
}
});
$("#password").focusout(function() {
var pass = $("#password").val();
var strength = 0;
//if password contains both lower and uppercase characters, increase strength value
if (pass.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
//if it has numbers and characters, increase strength value
if (pass.match(/([a-zA-Z])/) && pass.match(/([0-9])/)) strength += 1
//if it has one special character, increase strength value
if (pass.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
//if it has two special characters, increase strength value
if (pass.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
if (pass == '') {
//console.log("test" + strength)
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_password").text("* You have to enter your password !");
} else if ($("#password").val().length < 8) {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_password").text("*You have to enter minimum 8 characters of your password !");
} else if (strength < 1) {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_password").text("*your password is weak!please use letters,special symbols and numbers");
} else {
$(this).css({
"border-color": "#2eb82e"
});
$('#submit').attr('disabled', false);
$("#error_password").text("");
}
});
$("#cpassword").focusout(function() {
cpass = $("#cpassword").val();
if (cpass == '') {
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_cpassword").text("* You have to re-enter your password !");
} else {
$(this).css({
"border-color": "#2eb82e"
});
$('#submit').attr('disabled', false);
$("#error_cpassword").text("");
}
});
$("#submit").click(function() {
if ($("#fname").val() == '') {
$("#fname").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_name").text("* You have to enter your first name!");
}
if ($("#lname").val() == '') {
$("#lname").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_lname").text("* You have to enter your Last name!");
}
if ($("#dob").val() == '') {
$("#dob").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_dob").text("* You have to enter your Date of Birth!");
}
if ($("#email").val() == '') {
$("#email").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_email").text("* You have to enter your email!");
}
if ($("#password").val() == '') {
$("#password").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_password").text("* You have to enter your password!");
}
if ($("#cpassword").val() == '') {
$("#cpassword").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_cpassword").text("* You have to re-enter your password!");
}
});
});
</script>
答案 0 :(得分：1)
如果验证失败，则需要在提交按钮的单击功能结束时返回false。这将阻止表单提交。
$("#submit").click(function() {
var passedValidation = true;
if ($("#fname").val() == '') {
$("#fname").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_name").text("* You have to enter your first name!");
passedValidation = false;
}
if ($("#lname").val() == '') {
$("#lname").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_lname").text("* You have to enter your Last name!");
passedValidation = false;
}
if ($("#dob").val() == '') {
$("#dob").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_dob").text("* You have to enter your Date of Birth!");
passedValidation = false;
}
if ($("#email").val() == '') {
$("#email").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_email").text("* You have to enter your email!");
passedValidation = false;
}
if ($("#password").val() == '') {
$("#password").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_password").text("* You have to enter your password!");
passedValidation = false;
}
if ($("#cpassword").val() == '') {
$("#cpassword").css("border-color", "#FF0000");
$('#submit').attr('disabled', true);
$("#error_cpassword").text("* You have to re-enter your password!");
passedValidation = false;
}
return passedValidation;
});
此外，在验证密码验证时，您不确认两个密码是否匹配。
答案 1 :(得分：0)
你必须改变数据验证=＆＃34; text＆＃34;对
`<input id="fname" name="fname" class="form-control" type="text" data-validation="required">`