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

在我的表单中，当用户填写电子邮件部分时，如果以前使用过该电子邮件，并且自动填写会将该电子邮件显示为无效信息。如何更改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");
  }
}

[1]：https://i.stack.imgur.com/nQD04.png
[2]: http://jsfiddle.net/M6N24/532/
名字
姓
电子邮件
请输入有效的电子邮件地址
电话
请输入有效的电话号码
城市
州/省
公司
评论
--没有--
来访者
镶嵌


--没有--
内部的
贸易展览会
网站
直销
社会化媒体
另外


身体{
颜色：#fff；
背景色：#30bda6；
文本对齐：居中；
}
形式{
颜色：#fff；
背景色：#30bda6；
文本对齐：居中；
字体系列：Lato；
}
* {
框大小：边框框；
}
.表格名称{
字号：38px；
颜色：#fff；
字体系列：“Lato”；
字母间距：70px；
}
输入{
字体大小：15px；
高度：48px；
边缘顶部：8px；
}
输入[type=“tel”]{
宽度：100%；
填充：10px；
背景色：#30bda6；
边框：1px实心#fff；
字体大小：15px；
高度：48px；
}
输入[type=“text”]{
宽度：100%；
填充：10px；
背景色：#30bda6；
边框：1px实心#fff；
字体大小：15px；
}
输入：焦点{
背景色：#fff；
}
输入[type=“text”]：焦点{
背景色：#fff；
}
输入[type=“text”]：已访问{
背景色：#fff；
}
输入[type=“tel”]：焦点{
背景色：#fff；
}
输入[type=“tel”]：已访问{
背景色：#fff；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
填充：5px0；
}
文本区{
宽度：100%；
背景色：#30bda6；
边框：1px实心#fff；
}
文本区域：焦点{
背景色：#fff；
}
#公司{
弹性基准：100%；
最大宽度：100%；
}
标签：第n个最后一个子项（-n+2）{
弹性基准：100%；
最大宽度：100%；
}
选择
标签{
高度：50px；
宽度：48%；
利润率：2%1%；
文本对齐：左对齐；
字体系列：“Lato”；
字体大小：15px；
}
#潜艇{
边界半径：6px；
宽度：120px；
高度：35px；
文本转换：大写；
显示：块；
边缘顶部：48px；
字体大小：16px；
边界：无；
}
#sub2{
边界半径：6px；
宽度：120px；
高度：35px；
文本转换：大写；
显示：块；
边缘顶部：48px；
字体大小：16px；
边界：无；
}
标签{
位置：相对位置；
}
法兰西{
位置：绝对位置；
底部：0；
右：0；
转换：翻译（-50%，65%）；
不透明度：0；
过渡：不透明度.5s，颜色.5s；
}
[数据有效].fa{
不透明度：1；
颜色：#00594C；
}
[data valid=“valid”].fa{
颜色：#00594C；
}
[data valid=“error”].fa{
颜色：#AB0000；
}
.错误{
显示：无；
颜色：#AB0000；
字体大小：.7em；
位置：绝对位置；
左：10px；
排名：0；
转化：translateY（150%）；
字体大小：12px；
边缘顶部：2倍；
}
[数据有效=“错误”]。错误{
显示：块；
}
输入#sub2:未（[禁用]）{
背景色：#fff；
颜色：#00AB8E；
}
输入#子：未（[禁用]）{
背景色：#fff；
颜色：#F68D2E；；
}
#谢谢{显示：无；}
#谢谢你，成功{
显示：块；
文本对齐：居中；
}
#细分页面输入：焦点{
背景色：#fff！重要；；
}
#细分页面文本区域：焦点{
背景色：#fff！重要；；
}
#细分页面输入[type=“text”]{
宽度：100%；
填充：10px；
背景色：#30bda6；
边框：1px实心#fff；
}
#标签注释{
边缘顶部：8px；
}
@介质（最大宽度：656px）{
标签{
宽度：98%；
高度：70像素；
}
法兰西{
转换：翻译（-50%，-45%）；
}
}
@介质（最小宽度：656px）{
.集装箱{
弯曲方向：行；
柔性包装：包装；
自我校准：灵活启动；
}
标签{
边缘底部：20px；
}
}
功能电话号码（电话）{
var phoneno=/^\d{9}|\d{10}|\d{11}$/；
返回电话号码测试（电话）；
}
$（'input[type=“tel”]”）。在（'keyup'，function（）上{
var$label=$（this）.closest（'label'）；
如果（$（this.val（）.trim（）！=“”）{
如果（$（this）.is（'#phone'））{
if（电话号码（$（this.val（）））{
$label.attr（'data-valid'，'valid'）；
}否则{
$label.attr（'data-valid'，'error'）；
log（“这是有效的”）
}
}否则{
$label.attr（'data-valid'，'valid'）；
log（“这是有效的”）
}
}否则{
$label.removeAttr（'data-valid'）；
log（“这是有效的”）
}
});
功能验证电子邮件（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（电子邮件）；
}
$（'input[type=“text”]”）。在（'keyup'，function（）上{
var$label=$（this）.closest（'label'）；
如果（$（this.val（）.trim（）！=“”）{
如果（$（this）.is（'#email'））{
if（validateEmail（$（this.val（）））{
$label.attr（'data-valid'，'valid'）；
}否则{
$label.attr（'data-valid'，'error'）；
log（“这是有效的”）
}
}否则{
$label.attr（'data-valid'，'valid'）；
log（“这是有效的”）
}
}否则{
$label.removeAttr（'data-valid'）；
log（“这是有效的”）
}
});
测试=函数（）{
如果（$（“#名字”）.val（）&&$
<input type="email" name="email" readonly>