私のコードの問題は、検証が正しく機能していないことです。名を入力すると、「名前は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>検証が失敗した場合は、送信ボタンのクリック機能の最後に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;
});
また、パスワードの検証チェックでは、両方のパスワードが一致することを確認しません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加