-1
當前填寫表單中輸入字段的用戶可以單擊提交按鈕，即使它顯示電子郵件和電話字段無效。目前，我的JavaScript已設置好，因此提交按鈕將不會被禁用，並且只要輸入字段中有文本，就允許用戶單擊「提交」。如果在輸入字段中提供了正確和有效的信息，是否有方法只允許用戶單擊提交。如果有人可以幫忙，我會很感激。 
表單 - 不允許用戶使用不正確的電話和電子郵件提交
- 無 內部 展會 網站 直復營銷 社會化媒體 其他
body {
color: #fff;
background-color: #f78e2a;
text-align: center;
}
form {
color: #fff;
background-color: #f78e2a;
text-align: center;
font-family: Lato;
}
* {
box-sizing: border-box;
}
.form-title {
font-size: 38px;
color: #fff;
font-family: "Lato";
letter-spacing: 70px;
}
input[type="tel"] {
width: 100%;
height: 85%;
padding: 10px;
background-color: #f9a558;
border: 1px solid #fff;
}
input[type="text"] {
width: 100%;
padding: 10px;
background-color: #f9a558;
border: 1px solid #fff;
}
input[type="text"]:focus {
background-color: #fff;
}
input[type="text"]:visited {
background-color: #fff;
}
input[type="tel"]:focus {
background-color: #fff;
}
input[type="tel"]:visited {
background-color: #fff;
}
.container {
display: flex;
flex-direction: column;
padding: 5px 0;
margin-left: 10%;
margin-right: 10%;
}
textarea {
width: 100%;
background-color: #f9a558;
border: 1px solid #fff;
}
textarea:focus {
background-color: #fff;
}
#co {
flex-basis: 100%;
max-width: 100%;
}
label:nth-last-child(-n+2) {
flex-basis: 100%;
max-width: 100%;
}
select,
label {
height: 50px;
width: 48%;
margin: 2% 1%;
text-align: left;
font-family: "Lato";
}
#sub {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 10px;
}
button {
margin-top: 10px;
background-color: #B9B9B9;
color: #959595;
border-radius: 6px;
width: 120px;
height: 35px;
margin-left: 1%;
display: block;
}
button:focus {
background-color: #fff;
color: #f78e2a;
}
@media (max-width: 426px) {
label {
width: 98%;
}
}
@media (min-width: 426px) {
.container {
flex-direction: row;
flex-wrap: wrap;
align-self: flex-start;
}
}
label {
position: relative;
}
.fa {
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, -5%);
opacity: 0;
transition: opacity .5s, color .5s;
}
[data-valid] .fa {
opacity: 1;
color: green;
}
[data-valid="valid"] .fa {
color: green;
}
[data-valid="error"] .fa {
color: red;
}
.error {
display: none;
color: red;
font-size: .7em;
position: absolute;
left: 10px;
top: 0;
transform: translateY(150%);
}
[data-valid="error"] .error {
display: block;
}
input#sub:not([disabled]){
background-color: #fff;
color: #F68D2E;;
}
function phoneNumber(phone) {
var phoneno = /^\d{9,11}$/;
console.log("PHONE: "+phoneno.test(phone));
return phoneno.test(phone);
}
$('input[type="tel"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#phone')) {
if (phoneNumber($(this).val())) {
$label.attr('data-valid', 'valid');
$(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
} else {
$label.attr('data-valid', 'error');
console.log("this works");
$(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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,}))$/;
console.log("email: "+re.test(email));
return re.test(email);
}
$('input[type="text"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#email')) {
if (validateEmail($(this).val())) {
$label.attr('data-valid', 'valid');
$(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
} else {
$label.attr('data-valid', 'error');
console.log("this works 1")
$(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works 2");
}
} else {
$label.removeAttr('data-valid');
console.log("this works 3");
}
});
test = function() {
if ($("#first_name").val()
&& $("#last_name").val()
&& $("#email").val()
&& $("#phone").val()
&& $("#city").val()
&& $("#state").val()
&& $("#company").val()
&& $("#comments").val()) {
$("#sub").removeAttr("disabled");
}
}
HTML5驗證可以很容易... HTTPS：//developer.mozilla.org/en-US/docs/Learn/HTML/Forms/ Form_validation – epascarello