jQuery Validate plugin does not work with rules('add') method

Question

I've a problem... I'm working on a joomla custom search module for sobipro, which can search in a specific category, but can't search in its sub-categories. For this reason i need to validate the form and set as "Required" the "sid_list1" select list class. I'm trying to use the JQuery Validate Plugin, but it doesen't work for me. This is how i set him, any idea?

<script text= type='text/javascript'> 
$("#XTspSearchForm132").validate(
{
    rules:
    {
        $('.sid_list1').each(function() {
    $(this).rules('add', {
        required: true,
        messages: {
            required:  "your custom message"
        }
    });
});
</script>

<form action="/index.php" method="post"
      id="XTspSearchForm132" >
    <div class="XTsearchhome">



<div class="XTSPSearch">
  <div></div>
  <div class="spspacer" style="clear:both;"></div>
  <div id="XTSPSearchForm">
    <div class="XTSPSearchCell1">
      <div class="XTSPSearchLabel">
        <strong>Search for: </strong>
      </div>
      <div class="XTSPSearchField"><input type="text" name="sp_search_for" size="20" value="visibile"  onblur="if (this.value=='') this.value='search...';" onfocus="if (this.value=='search...') this.value='';" class="XTSPSearchBox inputboxhome" id="XTSPSearchBox132" maxlength="20"/> </div>
    </div>
    <div class="XTSPSearchCell2">
      <div class="XTSPSearchField"><input type="submit" id="XTtop_button" name="search" value="Search" class="buttonhome" onclick="this.form.sp_search_for.focus();extSearchHelper132.extractFormValues();"/> </div>
    </div>

    <div class="XTSPSearchCell3">
      <div class="XTSPSearchLabel">
        <strong>Find entries that have: </strong>
      </div>
      <div class="XTSPSearchField"><span>
<!-- RadioButton 'spsearchphrase' Output -->
<input type="radio" name="spsearchphrase" id="XTspsearchphrase_all" value="all" checked="checked" />
<label for="XTspsearchphrase_all">All words</label>
<!-- RadioButton 'spsearchphrase' End -->
</span><span>
<!-- RadioButton 'spsearchphrase' Output -->
<input type="radio" name="spsearchphrase" id="XTspsearchphrase_any" value="any" />
<label for="XTspsearchphrase_any">Any words</label>
<!-- RadioButton 'spsearchphrase' End -->
</span><span>
<!-- RadioButton 'spsearchphrase' Output -->
<input type="radio" name="spsearchphrase" id="XTspsearchphrase_exact" value="exact" />
<label for="XTspsearchphrase_exact">Exact Phrase</label>
<!-- RadioButton 'spsearchphrase' End -->
</span> </div>
    </div>
    <div class="spspacer" style="clear:both; margin-bottom: 10px;"></div>
    <div class="spspacer" style="clear:both; min-height: 2px;"></div>
    <div id="XTSPExtSearch"><div class="XTSPSearchCell4"><div class="XTSPSearchLabel"><strong>Categories:</strong></div><div class="XTSPSearchField"><select class='sid_list1' name='to_sid_list_1321' id='extparent_1321' style='margin-top:4px;'><option style="" value="" selected="selected">- Seleziona categoria -</option><option style="" value="spc55" class="spc63" >Africa del Sud</option><option style="" value="spc56" class="spc63" >Nord America e Caraibi</option><option style="" value="spc57" class="spc63" >America Centrale</option><option style="" value="spc58" class="spc63" >Sud America</option><option style="" value="spc59" class="spc63" >Isole del Pacifico</option><option style="" value="spc60" class="spc63" >Oceano Indiano</option><option style="" value="spc61" class="spc63" >Penisola Arabica</option></select><select class='sid_list2' name='to_sid_list_1322' id='extparent_1322' style='margin-top:4px;'><option style="" value="" selected="selected">- Seleziona categoria -</option><option style="" value="spc62" class="spc55" >Botswana</option><option style="" value="spc64" class="spc55" >Mauritius e Seychelles</option><option style="" value="spc65" class="spc55" >Mozambico</option><option style="" value="spc66" class="spc55" >Namibia</option><option style="" value="spc67" class="spc55" >Zimbabwe e Zambia</option><option style="" value="spc68" class="spc55" >Sudafrica</option><option style="" value="spc69" class="spc56" >Anguilla</option><option style="" value="spc70" class="spc56" >Antigua e Barbados</option><option style="" value="spc71" class="spc56" >Aruba</option><option style="" value="spc72" class="spc56" >Bahamas</option><option style="" value="spc73" class="spc56" >Bermuda</option><option style="" value="spc74" class="spc56" >Giamaica</option><option style="" value="spc75" class="spc56" >Rep Dominicana</option><option style="" value="spc76" class="spc56" >St Lucia</option><option style="" value="spc77" class="spc56" >St Martin</option><option style="" value="spc78" class="spc56" >Turks and Caicos</option><option style="" value="spc79" class="spc56" >US &amp; British Virgin Islands</option><option style="" value="spc80" class="spc56" >Canada</option><option style="" value="spc81" class="spc56" >Canouan Island</option><option style="" value="spc82" class="spc56" >Stati Uniti</option><option style="" value="spc83" class="spc57" >Belize</option><option style="" value="spc84" class="spc57" >Costa Rica</option><option style="" value="spc85" class="spc57" >Guatemala</option><option style="" value="spc86" class="spc57" >Messico</option><option style="" value="spc87" class="spc57" >Panama</option><option style="" value="spc88" class="spc58" >Equador</option><option style="" value="spc89" class="spc58" >Perù</option><option style="" value="spc90" class="spc59" >Hawaii</option><option style="" value="spc91" class="spc59" >Polinesia Francese</option><option style="" value="spc92" class="spc60" >Seishelles</option><option style="" value="spc93" class="spc60" >Mauritius</option><option style="" value="spc94" class="spc61" >Dubai</option><option style="" value="spc95" class="spc61" >Oman</option></select></div></div><div class="spspacer" style="clear:both; margin-bottom: 10px;"></div>
      <div class="XTSPSearchCell5">
        <div class="XTSPSearchLabel">
          <strong>Prodotto: </strong>
        </div>
        <div class="XTSPSearchField"><select id="XTfield_prodotto" name="field_prodotto" id="XTfield_prodotto" class="XTSPSearchSelect" >
    <option value=""> --- Select Prodotto  --- </option>
    <option value="prodotto_option_12">Noleggio auto</option>
    <option value="prodotto_option_11">Escursioni</option>
    <option value="prodotto_option_10">Soggiorni Mare</option>
    <option value="prodotto_option_9">Tour in Auto</option>
    <option value="prodotto_option_8">Tour di Gruppo</option>
    <option value="prodotto_option_7">Minitour</option>
    <option value="prodotto_option_6">Noleggio moto</option>
    <option value="prodotto_option_5">Noleggio camper</option>
</select> </div>
      </div>
      <div class="spspacer" style="clear:both; margin-bottom: 10px;"></div>
      <div class="XTSPSearchCell6">
        <div class="XTSPSearchLabel">
          <strong>Paese: </strong>
        </div>
        <div class="XTSPSearchField"><select id="XTfield_paese" name="field_paese" id="XTfield_paese" class="XTSPSearchSelect" >
    <option value=""> --- Select Paese  --- </option>
    <optgroup label="Africa del Sud">
        <option value="paese_option_7">Botswana</option>
        <option value="paese_option_10">Mauritius e Seychelles</option>
        <option value="paese_option_9">Mozambico</option>
        <option value="paese_option_11">Nambia</option>
        <option value="paese_option_12">Sudafrica</option>
        <option value="paese_option_8">Zimbawe e Zambia</option>
    </optgroup>
    <optgroup label="America Centrale">
        <option value="paese_option_18">Belize</option>
        <option value="paese_option_17">Costarica</option>
        <option value="paese_option_16">Guatemala</option>
        <option value="paese_option_15">Messico</option>
        <option value="paese_option_14">Panama</option>
    </optgroup>
    <optgroup label="Nord America e Caraibi">
        <option value="paese_option_37">Anguilla</option>
        <option value="paese_option_36">Antigua e Barbados</option>
        <option value="paese_option_35">Aruba</option>
        <option value="paese_option_34">Bahamas</option>
        <option value="paese_option_33">Bermuda</option>
        <option value="paese_option_26">Canada</option>
        <option value="paese_option_25">Canouan Island</option>
        <option value="paese_option_32">Giamaica</option>
        <option value="paese_option_31">Rep Dominicana</option>
        <option value="paese_option_30">St Lucia</option>
        <option value="paese_option_29">St Martin</option>
        <option value="paese_option_24">Stati Uniti</option>
        <option value="paese_option_28">Turks and Caicos</option>
        <option value="paese_option_27">US &amp; British Virgin Islands</option>
    </optgroup>
    <optgroup label="Oceano Indiano">
        <option value="paese_option_178">Seishelles</option>
        <option value="paese_option_177">Mauritius</option>
    </optgroup>
    <optgroup label="Pacific Islands">
        <option value="paese_option_149">Hawaii</option>
        <option value="paese_option_148">Polinesia Francese</option>
    </optgroup>
    <optgroup label="Penisola Arabica">
        <option value="paese_option_182">Dubai</option>
        <option value="paese_option_181">Oman</option>
    </optgroup>
    <optgroup label="Sud America">
        <option value="paese_option_146">Equador</option>
        <option value="paese_option_145">Perù</option>
    </optgroup>
</select> </div>
      </div>
      <div class="spspacer" style="clear:both; margin-bottom: 10px;"></div>
      <div class="XTSPSearchCell7">
        <div class="XTSPSearchLabel">
          <strong>Stile di Viaggio: </strong>
        </div>
        <div class="XTSPSearchField"><select id="XTfield_temi" name="field_temi" id="XTfield_temi" class="temi SPSearchSelect">
    <option value=""> --- Select Stile di Viaggio  --- </option>
    <option value="stile_option_13">Luna di Miele</option>
    <option value="stile_option_12">Avventure</option>
    <option value="stile_option_11">Natura e Animali</option>
    <option value="stile_option_10">Deserto</option>
    <option value="stile_option_9">Cultura e Antiche Civiltà</option>
    <option value="stile_option_8">Spiaggia Mare e Relax</option>
    <option value="stile_option_7">Sott'Acqua</option>
    <option value="stile_option_6">On the Road</option>
    <option value="stile_option_5">Shopping nelle Grandi Città</option>
    <option value="stile_option_4">Mai più Soli</option>
    <option value="stile_option_3">Spa e Benessere</option>
    <option value="stile_option_2">Famiglie</option>
</select> </div>
      </div>
      <div class="spspacer" style="clear:both; margin-bottom: 10px;"></div>
      <div class="XTSPSearchCell8">
        <div class="XTSPSearchLabel">
          <strong>Cerca nelle offerte: </strong>
        </div>
        <div class="XTSPSearchField"><div id="XTfield_offerte">
<div ><span>
<!-- CheckBox 'field_offerte[]' Output -->
<input type="checkbox" name="field_offerte[]" id="XTfield_offerte_field_offerte_option_1" value="field_offerte_option_1" class="XTSPSearchChbx" />
<label for="XTfield_offerte_field_offerte_option_1">Sì</label>
<!-- CheckBox 'field_offerte[]' End -->
</span></div></div><div class="spspacer" style="clear:both;"></div> </div>
      </div>
      <div class="spspacer" style="clear:both; margin-bottom: 10px;"></div>
    </div>
  </div>
  <div class="spspacer" style="clear:both;"></div>
  <div class="XTSPListing">
    <div class="XTSPEntriesListContainer"></div>
    <div class="spspacer" style="clear:both;"></div>
    <div class="spspacer" style="clear:both;"></div>
  </div>
</div>
<div>

<input type="hidden" id="XTSP_sid" name="sid" value="54"/>
<input type="hidden" id="XTSP_task" name="task" value="search.search"/>
<input type="hidden" id="XTSP_option" name="option" value="com_sobipro"/>

            <input type="hidden" id="sid_list132" name="sid_list" value=""/>
                    <input type="hidden" id="XTSP_Itemid" name="Itemid" value="101"/>
    </div></div>
</form>

Thank you for reply, but it doesn't work. look at the website, are there any error? provafabio.netsons.org — user2043299
– user2043299, Commented Feb 5, 2013 at 20:43
I did not see your comment until now because you didn't put it under my answer. Yes, your original code was malformed and if you properly integrate my solution into your code, it will work. You are supposed to apply some common sense, not just blindly copy from the jsFiddle. The lines which contained comments //for demo, are only for the jsFiddle demo so you can simulate the submit without an error. Remove the entire submitHandler block from your code if you really want yours to submit! (See the code out in the open of my answer) — Sparky
– Sparky, Commented Feb 6, 2013 at 16:54
Look at your browser's error console. The very first error is Failed to load resource: the server responded with a status of 404 (Not Found) - jquery.js. This means, you're not even including the jquery file so nothing is going to work. Nothing is here: www.provafabio.netsons.org/components/com_sobipro/lib/js/jquery.js — Sparky
– Sparky, Commented Feb 6, 2013 at 17:00

Sparky · Accepted Answer · 2013-02-05 16:34:56Z

3

You cannot put the rules('add') method inside of .validate(). Only in special situations are you allowed to put a function inside of .validate({rules:{...}}) ... this is not one of them.

rules('add') is a whole separate method, and as such, gets used independently from .validate(). That's the whole point of having a separate method. You use .validate() to initialize the form, and then you can use other methods to manipulate the plugin further.

Do it like this...

$(document).ready(function () {

    // initialize the plugin with .validate()
    $("#XTspSearchForm132").validate({
        // other rules and options
    });

    // use rules() method to add rules by class name
    $('.sid_list1').each(function () {
        $(this).rules('add', {
            required: true,
            messages: {
                required: "your custom message"
            }
        });
    });

});

Working Demo: http://jsfiddle.net/RtFKc/

edited Feb 5, 2013 at 16:34

answered Feb 5, 2013 at 16:04

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user2043299 Over a year ago

hi, I remove demo lines end enable the requested jquery, but no results for now

Sparky Over a year ago

@user2043299, please study up on the topics of JavaScript and jQuery syntax. You have a syntax error as per the browser's console. Hint: You forget to remove a }. See my code, no, study my code above... see the difference?

Sparky Over a year ago

I don't mean to sound rude or come off the wrong way, but Stackoverflow is primarily meant for "professional and enthusiast" programmers. You are expected to have some basic programming skills beyond 'cut & paste', including the ability to pull up your browser console to see any JavaScript errors.

user2043299 Over a year ago

You don't sound rude, you write a true thing... The error 404 on the jquery.js, is generated by an extension, which load the jquery library for the second time, so it cause conflict with the other one, loaded by the background module, I disabled it by changing name to the file to hide it. I think the error displayed now: Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' is caused by "$" in the script, I've to change it in "jQuery". I try and update discussion if it will be the correct way Thanx

Sparky Over a year ago

@user2043299, I'm really not sure what you're asking. Since this problem is solved, it would be easier for you to please create a whole new question for this new problem. Thanks.

|

halfer · Accepted Answer · 2019-09-23 21:48:16Z

0

In my case $(this).rules('add', ...) solve and works fine by call it inside $(document).ready(...).

edited Sep 23, 2019 at 21:48

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Aug 11, 2019 at 8:39

Sayed Abolfazl Fatemi

3,9313 gold badges40 silver badges51 bronze badges

Comments

E_net4 · Accepted Answer · 2024-05-13 19:43:43Z

0

To have the validator behave as supposed the element you are trying to validate needs to have the property name set to a value(one that's unique inside the form I guess).

If we look at the messages and rules of the form you are trying to validate you will notice that the plugin uses the name of the element in question as key for the property.

We can get the settings with the following line

$.data($("#my-form")[0], "validator").settings

If you notice an entry in the messages or rules that has ""(empty string) as key, then you know some element you are trying to validate is missing the name property.

Since the key for the rule or message is empty, it will get applied to pretty much on every input inside that form, and the plugin will show weird behaviour.

edited May 13, 2024 at 19:43

E_net4

30.5k13 gold badges118 silver badges155 bronze badges

answered Jun 7, 2021 at 19:18

user8604852

78011 silver badges18 bronze badges

Collectives™ on Stack Overflow

jQuery Validate plugin does not work with rules('add') method

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related