在手机和电子邮件输入框中显示正确的fa fa图标
在我的表单内部， email输入框在内部电子邮件正确时显示绿色圆圈x。
我希望它显示一个绿色复选标记圆圈图标，如上面的输入框（名字和姓氏）。
此外，当号码无效时， phone输入框会显示一个红色圆圈复选标记图标，我希望它显示一个红色圆圈x图标。
如果有人知道如何实现这一点，我们将不胜感激！
电子邮件和电话号码上显示的fa fa图标不正确：
的jsfiddle
HTML：
CSS：
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; }
jQuery的：
function phoneNumber(phone) { var phoneno = /^\d{9}|\d{10}|\d{11}$/; 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'); } else { $label.attr('data-valid', 'error'); console.log("this works") } } else { $label.attr('data-valid', 'valid'); console.log("this works") } } else { $label.removeAttr('data-valid'); console.log("this works") } }); 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); } $('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'); } else { $label.attr('data-valid', 'error'); console.log("this works") } } else { $label.attr('data-valid', 'valid'); console.log("this works") } } else { $label.removeAttr('data-valid'); console.log("this works") } }); test = function() { if ($("#first_name").val() && $("#last_name").val() && $("#email").val() && $("#phone").val() && $("#city").val() && $("#state").val() && $("#company").val()) { $("#sub").removeAttr("disabled"); } }
你的脚本正在运行……
但是你根据validation结果不改变FA图标。
如果有效，请添加：
$(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
如果错误，请添加：
$(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
CodePen