2
我的代碼問題是驗證工作不正確，即：如果我們輸入名字，它會顯示錯誤消息「名稱應該是3個字符」，但它不會禁用提交按鈕，因爲所有字段都顯示錯誤消息，但它已成功提交。所以幫助我僅在所有驗證都正確的情況下才提交。我正確編寫代碼，但我不明白問題出在哪裏。Jquery表單驗證工作不正常
<!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>
Thanks ItsDuckyyyy，提交按鈕只在值爲空時工作，但我的問題是當名字應該是3個字符，但我們輸入了2個字符並提交它被submit.this條件寫在焦點輸出功能，當小於3個字符的提交按鈕應禁用，否則啓用。但它不起作用，請查看$（「＃fname」）。focusout（function（）），我確認這兩個密碼匹配在這個聚焦函數中。不僅僅是第一個名稱適用於所有的字段 –
I'我不太清楚什麼不適合你@Allu，它似乎適用於我（參見：[這裏]（https://puu.sh/xqQCw/d411690af4.gif））。 – ItsDuckyyyy
謝謝duckkyyyy.now我明白mycode的問題 –