表单 - 自动填写使电子邮件验证失败

【问题标题】：Forms - Auto fill making email validation fail表单 - 自动填写使电子邮件验证失败
【发布时间】：2017-12-22 01:27:40
【问题描述】：

在我的表单中，当用户填写电子邮件部分时，如果该电子邮件以前已被使用过，并且自动填写信息，则该电子邮件显示为无效。如何更改 javascript 或 JQuery 使其不执行此操作？任何帮助将不胜感激！

[![在此处输入图像描述][1]][1] [在此处输入链接描述][2]

  [1]: https://i.stack.imgur.com/nQD04.png
  [2]: http://jsfiddle.net/M6N24/532/

<form class="container" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
              <label>First Name
                <input id="first_name" maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>Last Name
                <input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>Email
                <span class="error">Please enter a valid email address</span>
                <input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
              </label>
              <label>Phone
                <span class="error">Please enter a valid phone number</span>              
                <input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>City
                <input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>State/Province
                <input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label id="co">Company
                <input id="company" name="company" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>Comments
                <textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()"></textarea>
                <input id="sub" type="submit" disabled="disabled" />
              </label>

                <div>                
                    <select  hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest">
                    <option value="">--None--</option>
                    <option selected="selected" value="Visiant">Visiant</option>
                    <option  value="Tessellate">Tessellate</option>
                </select><br>

                <select  hidden="true" id="lead_source" name="lead_source">
                    <option value="">--None--</option>
                    <option value="Internal">Internal</option>
                <option value="Trade Show">Trade Show</option>
                <option selected="selected" value="Website">Website</option>
                <option value="Direct Marketing">Direct Marketing</option>
                <option value="Social Media">Social Media</option>
                <option value="Other">Other</option>
                </select><br>
                </div>
            </form>

body {
  color: #fff;
  background-color: #30bda6;
  text-align: center;
}

form {
  color: #fff;
  background-color: #30bda6;
  text-align: center;
  font-family: Lato;
}

* {
  box-sizing: border-box;
}

.form-title {
  font-size: 38px;
  color: #fff;
  font-family: "Lato";
  letter-spacing: 70px;
}

input {
  font-size: 15px;
  height: 48px;
  margin-top: 8px;
}

input[type="tel"] {
  width: 100%;
  padding: 10px;
  background-color: #30bda6;
  border: 1px solid #fff;
  font-size: 15px;
  height: 48px;
}
input[type="text"] {
  width: 100%;
  padding: 10px;
  background-color: #30bda6;
  border: 1px solid #fff;
  font-size: 15px;
}

input:focus {
  background-color: #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;
}

textarea {
  width: 100%;
  background-color: #30bda6;
  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";
  font-size: 15px;
}

#sub {
  border-radius: 6px;
  width: 120px;
  height: 35px;
  text-transform: uppercase;
  display: block;
  margin-top: 48px;
  font-size: 16px;
  border: none;
}

#sub2 {
  border-radius: 6px;
  width: 120px;
  height: 35px;
  text-transform: uppercase;
  display: block;
  margin-top: 48px;
  font-size: 16px;
  border: none;
}


label {
  position: relative;
}

.fa {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-50%, 65%);
  opacity: 0;
  transition: opacity .5s, color .5s;
}

[data-valid] .fa {
  opacity: 1;
  color: #00594C;
}

[data-valid="valid"] .fa {
  color: #00594C;
}

[data-valid="error"] .fa {
  color: #AB0000;
}

.error {
  display: none;
  color: #AB0000;
  font-size: .7em;
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(150%);
  font-size: 12px;
  margin-top: 2px;
}

[data-valid="error"] .error {
  display: block;
}

input#sub2:not([disabled]){
    background-color: #fff;
    color:  #00AB8E;
}

input#sub:not([disabled]){
    background-color: #fff;
    color: #F68D2E;;
}


#thankyou { display:none;}

#thankyou.success { 
    display: block;
    text-align: center;
}

#tessellate-page input:focus {
    background-color: #fff !important;;
}

#tessellate-page textarea:focus {
    background-color: #fff !important;;
}

#tessellate-page input[type="text"] {
  width: 100%;
  padding: 10px;
  background-color: #30bda6;
  border: 1px solid #fff;
}

#comments_label {
    margin-top: 8px;
}


@media (max-width: 656px) {
  label {
    width: 98%;
    height: 70px;
  }

   .fa {
    transform: translate(-50%, -45%);
  }
}

@media (min-width: 656px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }

  label {
    margin-bottom: 20px;

  }


}

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");
  }
}

【问题讨论】：

  • this: &lt;form autocomplete='off'&gt; exists 不确定 chrome 是否支持它。

标签： javascript jquery forms validation email


【解决方案1】：

您正在检查文本框 keyup 事件的电子邮件验证，但 jquery 不将自动填充视为 keyup 事件。它甚至无法使用自动填充读取填充值。

【讨论】：

    【解决方案2】：

    您可以使用focusout 事件代替keyup 事件来解决您的问题。
    这是更新的jsfiddle

    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('focusout', 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");
  }
}
    body {
  color: #fff;
  background-color: #30bda6;
  text-align: center;
}

form {
  color: #fff;
  background-color: #30bda6;
  text-align: center;
  font-family: Lato;
}

* {
  box-sizing: border-box;
}

.form-title {
  font-size: 38px;
  color: #fff;
  font-family: "Lato";
  letter-spacing: 70px;
}

input {
  font-size: 15px;
  height: 48px;
  margin-top: 8px;
}

input[type="tel"] {
  width: 100%;
  padding: 10px;
  background-color: #30bda6;
  border: 1px solid #fff;
  font-size: 15px;
  height: 48px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  background-color: #30bda6;
  border: 1px solid #fff;
  font-size: 15px;
}

input:focus {
  background-color: #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;
}

textarea {
  width: 100%;
  background-color: #30bda6;
  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";
  font-size: 15px;
}

#sub {
  border-radius: 6px;
  width: 120px;
  height: 35px;
  text-transform: uppercase;
  display: block;
  margin-top: 48px;
  font-size: 16px;
  border: none;
}

#sub2 {
  border-radius: 6px;
  width: 120px;
  height: 35px;
  text-transform: uppercase;
  display: block;
  margin-top: 48px;
  font-size: 16px;
  border: none;
}

label {
  position: relative;
}

.fa {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-50%, 65%);
  opacity: 0;
  transition: opacity .5s, color .5s;
}

[data-valid] .fa {
  opacity: 1;
  color: #00594C;
}

[data-valid="valid"] .fa {
  color: #00594C;
}

[data-valid="error"] .fa {
  color: #AB0000;
}

.error {
  display: none;
  color: #AB0000;
  font-size: .7em;
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(150%);
  font-size: 12px;
  margin-top: 2px;
}

[data-valid="error"] .error {
  display: block;
}

input#sub2:not([disabled]) {
  background-color: #fff;
  color: #00AB8E;
}

input#sub:not([disabled]) {
  background-color: #fff;
  color: #F68D2E;
  ;
}

#thankyou {
  display: none;
}

#thankyou.success {
  display: block;
  text-align: center;
}

#tessellate-page input:focus {
  background-color: #fff !important;
  ;
}

#tessellate-page textarea:focus {
  background-color: #fff !important;
  ;
}

#tessellate-page input[type="text"] {
  width: 100%;
  padding: 10px;
  background-color: #30bda6;
  border: 1px solid #fff;
}

#comments_label {
  margin-top: 8px;
}

@media (max-width: 656px) {
  label {
    width: 98%;
    height: 70px;
  }
  .fa {
    transform: translate(-50%, -45%);
  }
}

@media (min-width: 656px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }
  label {
    margin-bottom: 20px;
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<form class="container" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
  <label>First Name
                <input id="first_name" maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
  <label>Last Name
                <input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
  <label>Email
                <span class="error">Please enter a valid email address</span>
                <input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
              </label>
  <label>Phone
                <span class="error">Please enter a valid phone number</span>              
                <input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
  <label>City
                <input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
  <label>State/Province
                <input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
  <label id="co">Company
                <input id="company" name="company" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
  <label>Comments
                <textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()"></textarea>
                <input id="sub" type="submit" disabled="disabled" />
              </label>

  <div>
    <select hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest">
                    <option value="">--None--</option>
                    <option selected="selected" value="Visiant">Visiant</option>
                    <option  value="Tessellate">Tessellate</option>
                </select><br>

    <select hidden="true" id="lead_source" name="lead_source">
                    <option value="">--None--</option>
                    <option value="Internal">Internal</option>
                <option value="Trade Show">Trade Show</option>
                <option selected="selected" value="Website">Website</option>
                <option value="Direct Marketing">Direct Marketing</option>
                <option value="Social Media">Social Media</option>
                <option value="Other">Other</option>
                </select><br>
  </div>
</form>

    【讨论】：

      【解决方案3】：

      如果这让您感到困扰，我建议您使用一些技巧禁用自动填充功能。使用 DOM 处理浏览器功能并不总是一个好方法。

      Chrome 会忽略自动填充的只读字段。您可以将输入字段加载为只读，并在悬停时使其可编辑

      <input type="email" name="email" readonly>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2021-12-28
        • 2015-06-15
        • 1970-01-01
        • 2012-04-17
        • 2015-11-09
        • 2015-11-02
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode