CODEWITHSUNDEEP
javascriptformsvalidationjoomla
Ilari
Ilari

Reputation: 37

Form validation javascript not working in Joomla article

I have made a custom form (which you can view here: http://tylypahka.tk/pisteet/pisteet.php) and it uses javascript based form validation. I've tried to embed the following code to a Joomla module with a Flexi content plugin which allows custom code in module.

So, it's working perfectly if I place the module into a proper position (you can test it here: http://tylypahka.tk/index.php/uutiset/78-pysyvae/75-tupapisteet). But if I try to put that exactly same module to an article, for some reason the validation javascript isn't working. I've tried to embed the module via various different plugins but none of them seem to get the javascript working. I have the following code in the module:

<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>

Does anyone know what could be the problem here? Any suggestions or help will be much appreciated!

Upvotes: 1

Views: 1310

Answers (2)

Irfan
Irfan

Reputation: 7059

I think due to conflict with mootools library your code is not working.Try using jQuery.noConflict().

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

Hope this will help.

Upvotes: 0

Lodder
Lodder

Reputation: 19733

You have 3 versions of jQuery running on your site, so I have a strong feeling it might be due to a jQuery conflict.

I'm not sure where you are adding your code but try using the code we use to detect if jQuery is already being loaded. If it isn't, it imports it.

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

Hope this helps.

Upvotes: 1

Related Questions