Jquery 验证引擎在 Chrome 和 Safari 中不起作用答案

【问题标题】：Jquery Validation Engine not working in Chrome and SafariJquery 验证引擎在 Chrome 和 Safari 中不起作用
【发布时间】：2013-05-14 07:13:38
【问题描述】：

我从https://github.com/posabsolute/jQuery-Validation-Engine 下载了 Jquery Validation Engine，它在 IE 和 Firefox 中运行良好，但在 Chrome 和 Safari 上无法运行，问题是字段为空或输入无效字符都没有关系，表单将始终被提交，并且由于我使用 php 将数据输入到数据库中，因此字段输入为空。

我确定我包含了所有需要的脚本；您是否阅读过任何其他成员在使用该插件时遇到 chrome 和 Safari 问题？我将非常感谢您的帮助 Pals。

在编辑中添加代码（对不起朋友）：

  <!doctype html>
  <html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
<script src="js/jquery-1.8.2.min.js" type="text/javascript">
</script>
<script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
</script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
<script>
    jQuery(document).ready(function(){
        // binds form submission and fields to the validation engine
        jQuery("#collect").validationEngine('attach');
    });
</script>
</head>

<body  onLoad="formReset()" onUnload="formReset()">
<script>
function formReset()
 {
 document.getElementById("collect").reset();
 }
</script>
<div class="formholder">
  <form id="collect" class="formular" method="post" action="insert.php">
<fieldset>
      <label>
    <input value="" data-prompt-position="topRight:0,20"  class="validate[required,custom[onlyLetterSp]] text-input" type="text" name="nombre"  />
  </label>
      <br/>
      <label>
    <input value=""  class="validate[required,custom[email]] text-input" data-prompt-position="topRight:0,20"  type="text" name="email"  />
  </label>
      <br/>
      <label>
    <input value="" data-prompt-position="topRight:0,20"   class="validate[required,custom[phone]] text-input" type="text" name="telefono"  />
  </label>
      <br/>
      <label>
    <select style="height:35px; width:200px;" name="informacion" class="select"  form="contact-form" type= "select">
          <option value="option1">option1</option>
          <option value="option2">option2</option>
          <option value="option3">option3</option>
          <option value="option4">option4</option>
          <option value="option5">option5</option>
        </select>
   </label>
      <input  class="submit" type="submit" value= ""/>
    </fieldset>
    <hr/>
 </form>
   </div>
   </body>
   </html>

【问题讨论】：

您也应该在 PHP 端进行验证，以确保这一点。出示你的代码，我们不是千里眼。
嗨 Adder，是的，我知道，只是我真的很喜欢这个插件显示的带有错误的工具提示，我还是 php 的新手。我按要求在表格中添加了代码，对不起那个朋友。

标签： php jquery html forms jquery-validation-engine

【解决方案1】：

查看此代码

它现在正在工作......

 <!doctype html>
  <html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" />
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script>
        jQuery(document).ready(function(){
            // binds form submission and fields to the validation engine
            jQuery("#collect").validationEngine('attach');
    });
</script>
</head>

<body  onLoad="formReset()" onUnload="formReset()">
<script>
function formReset()
 {
 document.getElementById("collect").reset();
 }
</script>
<div class="formholder">
  <form id="collect" class="formular" method="post" action="insert.php">
<fieldset>
      <label>
    <input value="" data-prompt-position="topRight:0,20"  class="validate[required] text-input" type="text" name="nombre"  />
  </label>
      <br/>
      <label>
    <input value=""  class="validate[required] text-input" data-prompt-position="topRight:0,20"  type="text" name="email"  />
  </label>
      <br/>
      <label>
    <input value="" data-prompt-position="topRight:0,20"   class="validate[required] text-input" type="text" name="telefono"  />
  </label>
      <br/>
      <label>
    <select style="height:35px; width:200px;" name="informacion" class="select"  form="contact-form" type= "select">
          <option value="option1">option1</option>
          <option value="option2">option2</option>
          <option value="option3">option3</option>
          <option value="option4">option4</option>
          <option value="option5">option5</option>
        </select>
   </label>
      <input  class="submit" type="submit" value= "test"/>
    </fieldset>
    <hr/>
 </form>
   </div>
   </body>
   </html>

【讨论】：

发生了什么变化？检查答案是否正确，它会提高您的接受率。
非常感谢@haseeb，似乎其他样式表的问题导致了问题，将检查并让你们知道，也非常感谢 Adder。
我找到了问题，它与我的css代码中的显示属性有关：.formular input, .formular select, .formular textarea { display : block; margin-bottom: 5px; height: 25px; box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.80); -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.80); -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.80); border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; }。将尝试在我的 css 中找到 display:block 的替代方法。谢谢！