首页 > 解决方案 > 通过 JQuery 函数传递 HTML 名称

问题描述

我正在尝试通过我的验证功能传递序列号字段。

该字段上的名称看起来像一个 ID,因为我正在创建一个与 Salesforce 相关的表单。

当我尝试通过我的 jQuery 函数传递字段时:


$('00N04000000WW1U').on('keypress keydown keyup',function(){

该功能不是提供输入是否与我的正则表达式匹配的实时反馈。

代码:

function dropDownFunction() {
  var x = document.getElementById("helpText");
  if (x.style.display === "initial") {
    x.style.display = "none";
  } else {
    x.style.display = "initial";
  }
}

$(document).ready(function() {
  var $regexname = /^[\s\S]{4,10}[\d]{8,10}[-][\d]{2}$/;
  $('00N04000000WW1U').on('keypress keydown keyup', function() {
    if (!$(this).val().match($regexname)) {
      // there is a mismatch, hence show the error message
      $('.emsg').removeClass('hidden');
      $('.emsg').show();
    } else {
      $('.emsg').addClass('hidden');
    }
  });
});
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">

<head>
  <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  <title>Test Page</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    #helpText {
      width: auto;
      height: auto;
      color: rgba(0, 0, 0, 0.5);
    }
    
    .emsg {
      color: red;
    }
    
    .hidden {
      visibility: hidden;
    }
  </style>
</head>

<br><br> Product Serial Number<br><input id="00N04000000WW1U" maxlength="255" name="00N04000000WW1U" size="20" type="text" required />

<button onclick="dropDownFunction()"><i class="fa fa-question-circle"></i></button>

<div id="helpText" style="display: none;">
  Scroll down for help with locating the serial number of your product.
</div>
<span class="emsg hidden">Invalid Input</span>

我制作了一个不同的表单字段,并通过我的验证功能传递了它,并且效果很好。任何帮助,将不胜感激!

标签: javascripthtmljquerysalesforce

解决方案


推荐阅读