表单验证 javascript 在 Joomla 文章中不起作用答案

【问题标题】：Form validation javascript not working in Joomla article表单验证 javascript 在 Joomla 文章中不起作用
【发布时间】：2013-02-07 21:42:03
【问题描述】：

我制作了一个自定义表单（您可以在此处查看：http://tylypahka.tk/pisteet/pisteet.php），它使用基于 javascript 的表单验证。我尝试将以下代码嵌入到带有 Flexi 内容插件的 Joomla 模块中，该插件允许模块中的自定义代码。

所以，如果我将模块放置在适当的位置，它就可以完美地工作（您可以在这里测试它：http://tylypahka.tk/index.php/uutiset/78-pysyvae/75-tupapisteet）。但是，如果我尝试将完全相同的模块放入文章中，由于某种原因，验证 javascript 无法正常工作。我试图通过各种不同的插件嵌入模块，但它们似乎都没有让 javascript 工作。我在模块中有以下代码：

<link rel="stylesheet" type="text/css" href="http://tylypahka.tk/pisteet/pisteet.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://tylypahka.tk/pisteet/jquery.validate.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#pisteet").validate({
  rules: {
    pisteet: {
      required: true,
      maxlength: 3
    }
  }
  });
  });
</script>

<div id="tupapisteet">
<div id="stylized" class="myform">
  <h1>Tupapisteet</h1>
   <p>Lisää tai vähennä tupapisteitä tuvilta, hyvän syyn kera</p>
        <form method="post" action="#" id="pisteet">

          <label for="nimi" class="label">Oma nimi<span class="small">Kirjoita oma nimimerkkisi</span></label>
          <input type="text" name="nimi" id="nimi" class="required">
          <br><br><br>

          <label for="tupa" class="label">Tupa<span class="small">Valitse tupa</span></label>
          <select name="tupa">
              <option type="text" name="Rohkelikko" id="Rohkelikko" value="Rohkelikko">Rohkelikko</option>
              <option type="text" name="Luihuinen" id="Luihuinen" value="Luihuinen">Luihuinen</option>
              <option type="text" name="Korpinkynsi" id="Korpinkynsi" value="Korpinkynsi">Korpinkynsi</option>
              <option type="text" name="Puuskupuh" id="Puuskupuh" value="Puuskupuh">Puuskupuh</option>
          </select>
          <br><br><br>

          <label for="pisteet" class="label">Pisteet<span class="small">Jos haluat vähentää pisteitä, laita eteen -</span></label>
          <input type="text" name="pisteet" id="pisteet" class="required number" maxlength="10">
          <br><br><br><br>

          <label for="syy" class="label">Syy<span class="small">Kirjoita tähän hyvät perustelut</span></label>
          <textarea type="text" name="syy" id="syy" class="required"></textarea>
          <br><br><br>

          <button type="submit" name="submit" value="submit">Oikeus tapahtukoon!</button>
        </form>
  </div>

有谁知道这可能是什么问题？任何建议或帮助将不胜感激！

【问题讨论】：

能否请您发送它不起作用的页面？

标签： javascript forms validation joomla

【解决方案1】：

您的网站上运行了 3 个版本的 jQuery，所以我强烈感觉这可能是由于 jQuery 冲突造成的。

我不确定您在哪里添加代码，但请尝试使用我们用来检测是否已加载 jQuery 的代码。如果不是，则导入它。

<?php
  if(!JFactory::getApplication()->get('jquery')){
     JFactory::getApplication()->set('jquery',true);
     $document = JFactory::getDocument();
     $document->addScript(JURI::root() . "components/your_component/jquery.js");
  }
?>

希望这会有所帮助。

【讨论】：

感谢您的回答，但不幸的是，这不起作用。事实上，验证在模块中停止工作，它以前工作的地方。
这可能是因为您还有 2 个以上版本的 jQuery 正在运行。在每个位置导入 jQuery 的位置添加此代码
谢谢，但它不起作用:(这很有趣，因为它在实际模块中工作，但如果我将模块放在文章中，它就会停止工作。Joomla 中是否预装了另一个验证插件它使用相同的类...？
不幸的是，Joomla 不使用这个。很少有人使用此代码。我们把它放在所有基于 jQuery 的扩展中。试试@Irfan 的回答。
好的...无论如何，谢谢！ :) 我想我尝试修改 Chronoforms 扩展以适应我的目的并在那里试试我的运气。它的内置验证也应该在文章中工作手指交叉

【解决方案2】：

我认为由于与 mootools 库冲突，您的代码无法正常工作。请尝试使用 jQuery.noConflict()。

    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j("#pisteet").validate({
      rules: {
        pisteet: {
          required: true,
          maxlength: 3
        }
      }
      });
 });

希望这会有所帮助。

【讨论】：