jQuery Forum

[validate] Validating multiple fields as one
[1Reply]
- 26-Nov-2012 10:26 AM
- Forum: Using jQuery Plugins
Hi, i need some help with the validate plugin.
I have 4 fields who need to be validated as a whole: when all the fields are filled i have to concatenate them and then perform some checks on the string.
If anything's wrong i have to show one single message and add the error class to all the fields.
If the user correct the data and then the whole string is correct the error message is hidden and all the error classes are removed.

I basically have two problems:
- accessing all the fields and not only the one currently being edited
- updating the status (i.e. the presence of the error class) of all the fields in the group

i got around the first one by directly accessing the IDs of the field i need but it surely isn't the best solution, i guess there's something i can do to access the values of a group's fields "relatively".

I tried grouping the fields and the validation seems to work (the length check is just a stand-in for the real check) but i can't get how to update the class of all the elements of a group.

this is the HTML
1. <form class="cmxform" id="texttests" method="get" action="foo.html">
2. <h2 id="summary"></h2>
3. <fieldset>
4. <input id="cf_1" name="cf_1" size="3" maxlength="3" class="required codiceFiscale" /><br />
5. <input id="cf_2" name="cf_2" size="3" maxlength="3" class="required codiceFiscale" /><br />
6. <input id="cf_3" name="cf_3" size="5" maxlength="5" class="required codiceFiscale" /><br />
7. <input id="cf_4" name="cf_4" size="5" maxlength="5" class="required codiceFiscale lastname" /><br />
8. <input class="submit" type="submit" value="Submit"/>
9. </fieldset>
10. </form>
and this is the javascript part.
1. $().ready(function() {
2. jQuery.validator.addMethod("codiceFiscale",
3. function(value){
4. var codiceFiscaleTMP = $("#cf_1").val() + $("#cf_2").val() + $("#cf_3").val() + $("#cf_4").val();
5. if (codiceFiscaleTMP.length != 16){
6. return false;
7. } else {
8. return true;
9. }
10. },
11. "Codice fiscale sbagliato");
13. validation = $("#texttests").validate({
14. groups: {
15. codiceFiscale: "cf_1 cf_2 cf_3 cf_4"
16. },
17. errorPlacement: function(error, element) {
18. if (element.attr("name") == "cf_1" || element.attr("name") == "cf_2" || element.attr("name") == "cf_3" || element.attr("name") == "cf_4"){
19. error.insertAfter(".lastname");
20. } else {
21. error.insertAfter(element);
22. }
23. }
24. });
25. });
Any help would be really appreciated.

Thanks!
Marcello

Problems with dialog autoresize on IE6
[0Replies]
- 29-Feb-2012 05:55 AM
- Forum: Using jQuery UI
Hi! I've recently updated the jquery-ui library and the style package from 1.8.4 to 1.8.18 and i've noticed a change in behavior: if i open a dialog and then change its contents with an ajax request the dialog no longer resizes to encompass the new content.

With 1.8.4 it correctly changed its height to show the new content, with 1.8.18 it keeps the same height and shows the scrollbar.

I browsed the release-notes of each version between 1.8.4 and 1.8.18 and it says they actually removed the autoResize option defaulting it to auto (which i never used anyway) and fixed another couple of bugs about the dialog widget.

Firefox and IE7+ works ok, but i couldn't find a way to make it work on IE6.

Does anybody else have the problem? Is there anything i can try?

Thanks in advance for your help.
Marcello

EDIT
I created a page with the bare essentials, removing everything but the dialog and the javascript code to append text inside it.
Everything stands: FF+Chrome work, IE6 doesn't.

Is it possibly an untracked bug?

Here's the simplified code:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
5. <link rel="stylesheet" type="text/css" href="jquery-ui.css" media="screen" />
6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
7. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
8. <script type="text/javascript">
9. 
21. </script>
22. <title>Untitled Document</title>
23. </head>
24. <body>
25. <div id="insertDialog">
26. <p id="testo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ante lacus, laoreet ornare posuere vel, dapibus at est. Nulla ac leo non diam varius mollis.</p>
27. </div>
28. </body>
29. </html>
The code for the dialog is pretty simple:
1. $('#insertDialog').dialog({
2. autoOpen: false,
3. width: 400,
4. minwidth: 400,
5. bgiframe: true,
6. closeOnEscape: true,
7. resizable: false,
8. title: "Aggiungi",
9. modal: true
10. });
(i tried to set resizable both TRUE and FALSE, to no avail)
1. <div id="insertDialog" title="" class="hidden">
2. <form id="insertForm" action="main" method="get">
3. <table>
4. <tfoot>
5. <tr><td colspan="2"> </td></tr>
6. <tr>
7. <td style="text-align: right;" colspan="2">
8. <input name="annulla" type="button" value="${ml.bottoneAnnulla}" class="rounded_grey" onclick="$('#insertDialog').dialog('close');" />
9. <input name="conferma" type="button" onclick="doCheckInsert();" value="${ml.bottoneConferma}" class="rounded" />
10. </td>
11. </tr>
12. </tfoot>
13. <tbody>
14. <tr>
15. <td class="label"><label for="barcodeIni">${ml.primaCarta}</label>:</td>
16. <td><input type="text" name="barcodeIni" id="barcodeIni" size="40" maxlength="31" class="textfield" onchange="isNumber(this);getCardsData($('#progressivoItemInsert').val());" tabindex="1" /></td>
17. </tr>
18. <tr>
19. <td class="label"><label for="barcodeFine">${ml.secondaCarta}:</label></td>
20. <td><input type="text" name="barcodeFine" id="barcodeFine" size="40" maxlength="31" class="textfield" onchange="isNumber(this);getCardsData($('#progressivoItemInsert').val());" tabindex="2" /></td>
21. </tr>
22. <tr>
23. <td colspan="2">
24. <input type="hidden" name="FUNCTIONID" value="InserimentoItemStornoRicarica" />
25. <input type="hidden" name="progressivoItem" id="progressivoItemInsert" value="" />
26. <input name="crea" type="button" value="${ml.verifica}" class="rounded" onclick="getCardsData($('#progressivoItemInsert').val());" />
27. </td>
28. </tr>
29. <tr><td colspan="2"> </td></tr>
30. <tr><td colspan="2"><span id="messaggioErrore" class="warning"></span></td></tr>
31. <tr><td colspan="2"> </td></tr>
32. </tbody>
33. </table>
34. </form>
35. </div>
and this is the snippet of javascript code that sets the content of the "messaggioErrore" div to show an error message:
1. $.ajax({
2. type: sType,
3. url: "main",
4. data: sData,
5. contentType: "application/x-www-form-urlencoded;charset=UTF-8",
6. dataType: "xml",
7. success: function(xml){
8. if ($(xml).find("risultato").text()=="OK"){
9. submittable = true;
10. $('#progressDialog').dialog('close');
11. } else if ($(xml).find("risultato").text()=="SE"){
12. document.location.href="main?FUNCTIONID=Login&MSG1=${ml.IDMSG_ErrorMessageIntro}&MSG2=${ml.IDMSG_SessioneScaduta}";
13. } else {
14. submittable = false;
15. $('#progressDialog').dialog('close');
16. $('#messaggioErrore').html($(xml).find("ERRMSG1").text());
17. }
18. },
19. error: function(){
20. // KO per problemi ajax
21. document.location.href="main?TEMPLATE_ERROR=PageError&MSG1=${ml.erroreGenerico} Ajax";
22. }
23. });

[MultiFile] Problem changing default values
[0Replies]
- 04-Mar-2011 08:38 AM
- Forum: Using jQuery Plugins
Hi, i'm using the multifile plugin to handle multiple uploads.
The upload process works but i can't change the default values.

this is the code i'm using for the input field
1. <input type="file" name="FILE_NOME" id="FILE_NOME" size="chars" class="multi" accept="pgp" />
and here's the javascript code:
1. $(function(){
2. $('#FILE_NOME').MultiFile({
3. STRING: {
4. remove: '<img src="/pinloader/img/delete_icon.gif" height="11" width="11" alt="x"/>'
5. selected:'Selezionato: $file',
6. denied:'File di tipo $ext non valido!'
7. }
8. });
9. });
It looks like the plugin simply ignores the default overrides without giving any kind of feedback.

I'm using v.1.47 of the plugin and jquery 1.5.1

Any help would be really appreciated.

P.S. the same problem is reported here (for an older version of the plugin) but without answers.

[validate] problem with a "remote" rule
[0Replies]
- 14-May-2010 05:54 AM
- Forum: Using jQuery Plugins
Hi, i'm having a problem with a remote rule.

here's the code:
1. $().ready(function() {
2. validation = $("#inserisci_promozione").validate({
3. rules: {
4. C_BNC_ABI: {
5. required: true,
6. remote: {
7. url: "main.app",
8. data: {
9. FUNCTIONID: "ValidaAbi",
10. C_CAB: function() { return $("#C_BNC_ABI").val(); }
11. } ,
12. success: function(data) {
13. if (data == true){
14. loadSelect($("#C_BNC_ABI").val());
15. }
16. }
17. }
18. }
19. },
20. messages: {
21. C_BNC_ABI: {
22. remote: "ABI non censito"
23. },
24. }
25. });
26. });
The remote call is a jsp that checks a database and correctly returns true or false.
The "success" clause of the remote call parses the results and if the remote check returned true it populates a dropdown menu with another ajax call.

The problem is that the validate part of the script quits working if the success clause is present.
The remote call works (i sniffed it) and correctly return true or false. But the validate() ignores the result and doesn't show the error message if the answer is false.

If i change the success clause content to even a simple alert it still doesn't work.

If i delete the success clause everything works fine.

Any idea why this happens?
Thanks in advance!
Marcello

[Validate] Knowing if a form has been validated
[0Replies]
- 14-Apr-2010 07:56 AM
- Forum: Using jQuery Plugins
Hi all, i have a pretty simple question, but i can't find a answer in the documentation.

I need to know if a form i have in a page has already been validated at least once.
Is there some specific method to use? A property to check?
Anything?

Thanks in advance!!!
Marcello

(autocomplete) syntax error on response parsing.
[1Reply]
- 03-Mar-2010 12:01 PM
- Forum: Using jQuery Plugins
Hi all, i'm trying to use the autocomplete plugin with a remote call but i'm getting a weird problem:
the code correctly invoke the remote address and gets a response back, but it doesn't show anything in the textfield to which it's linked and throws a javascript syntax error.

Unfortunately the code isn't live so i can't show you a test page, but the code itself is really simple and perfectly works if the dataset with the possible matches is loaded locally.

Here's the code:
1. $(document).ready(function(){
2. $("#C_BIN1").autocomplete("main.app", {
3. selectFirst: false,
4. extraParams: {FUNCTIONID: "RecuperoBin"}
5. });
6. });
this is the textfield:
1. <input type="text" name="C_BIN1" id="C_BIN1" class="textfield" size="8" maxlength="6" value=""/>
and this is an excerpt of the response:
```
270000
270001
270002
270003
270004
270005
270006

and, finally, here's what firebug debugs:
```
syntax error
270000

It looks like somehow it tries to parse the text in the response as a javascript file and, clearly, it crashes.

Any idea on what could be causing this?
It looks like it's something trivial but i can't solve the issue...

Thanks in advance!
Marcello

[jQuery] Problems with radio buttons
[2Replies]
- 02-Apr-2009 04:19 AM
- Forum: Using jQuery
Hi all, i'm having a problem reading checked values from radio button:
i have two sets of radio buttons and i need to read the value linked
to each selected/checked button.
Googling for answers i found this snippet:
$("input[@name='NAME']:checked").val()
but it only works if there's just one set of buttons on the page.
If there are more then one of them (the first in the html code) "takes
charge" and all the buttons return the same value.
You can find a test case here:
http://www.kikentai.org/jquery/test.html
Try fiddling around with the radio buttons before clicking the "click
me!" button...
Thanks for your help!
Marcello

[jQuery] Superfish and bgiframe issues
[0Replies]
- 13-Feb-2009 09:12 AM
- Forum: Using jQuery
Hi, i've been trying to create a dropdown menu using the superfish
v1.4.8 script and the bgiframe plugin (tried bot the latest, 2.1.1
version and the one included in the superfish package).
Everything works fine with just the superfish script, the menu behaves
correctly and all the styles are applied, the only problem is that
select elements show throught the dropdown, so i tried adding the
plugin. As soon as i add the plugin the menus get screwed up, all
stylings are lost and the menus become white boxes with the menu links
in white and the "false" word in black.
This is the same issue:
http://groups.google.com/group/jquery-en/browse_thread/thread/cd93c50eb6b74ac5/ae06cf9ac0d2b6db?lnk=gst&q=+Superfish+bgiframe#ae06cf9ac0d2b6db
but the thread offers no solutions
Here's the code, any help would be MUCH appreciated :)
**********************************************************
HTML
**********************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>A very basic Superfish menu example</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" type="text/css" href="css/asuperfish.css"
media="screen">
<link rel="stylesheet" type="text/css" href="css/scratch.css"
media="screen">
        <script type="text/javascript" src="js/jquery-1.2.6.min.js"></
script>
        <script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/
jquery.bgiframe.min.js"></script>
        <script type="text/javascript" src="js/superfish.js"></script>
        <script type="text/javascript">
        // initialise plugins
        jQuery(function(){
            $("ul.sf-menu").superfish().find('ul').bgIframe({opacity:false});
            // jQuery('ul.sf-menu').superfish();
        });
        </script>
    </head>
    <body>
<div id="header"><img src="img/header_left.gif" alt="" width="16"
height="50" /><img src="img/header_logo.gif" alt="Portale TSP"
width="142" height="50" /></div>
    <div id="menu">
        <ul class="sf-menu">
            <li>
                <a href="#a"><img src="img/menu_gestionali.gif" width="125"
height="23" /></a>
<ul class="submenu">
<li><h1>GESTIONE SOGGETTI</h1></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Super Brand</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Brand</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Esercenti</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Punti vendita</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Terminali</a></li>
<li><h1>GESTIONE ANAGRAFICA</h1></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Utenti</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Funzionalità</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Terminali</a></li>
</ul>
            </li>
            <li>
                <a href="#"><img src="img/menu_statistiche.gif" width="174"
height="23" /></a>
<ul class="submenu">
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Statistica 1</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Statistica 2</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Statistica 3</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Statistica 4</a></li>
</ul>
            </li>
            <li>
                <a href="#"><img src="img/menu_operativita.gif" width="134"
height="23" /></a>
<ul class="submenu">
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Operazione 1</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Operazione 2</a></li>
<li><a href="#"><img src="img/menu_bullet.gif"
alt=">" width="4" height="7" /> Operazione 3</a></li>
</ul>
            </li>
        </ul>
    </div>
<div id="main" style="clear: both">
<form id="mainForm" method="get" action="">
<input name="" type="button" />
<label for="button"></label>
<input type="submit" name="button" id="button" value="Submit" />
<input name="" type="text" />
<label for="select"></label>
<select name="select" id="select">
<option value="prova">prova</option>
<option value="prova">prova</option>
</select>
<select name="select2" id="select2">
<option value="prova">prova</option>
<option value="prova">prova</option>
</select>
<select name="select3" id="select3">
<option value="prova">prova</option>
<option value="prova">prova</option>
</select>
<select name="select4" id="select4">
<option value="prova">prova</option>
<option value="prova">prova</option>
</select>
</form>
</div>
    </body>
</html>
**********************************************************
CSS
**********************************************************
/* CSS Document */
body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}
.textfield {
    border: 1px solid #1c9999;
    background: #ff8d2f url(../img/textfield_bg.gif) repeat-x;
    color: #5f5f5f;
}
input.rounded {
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -moz-box-sizing:content-box;
    border-style:solid;
    border-width:1px;
    border-color: #1c9999;
    text-shadow:0 1px 0 #FFFFFF;
    cursor:pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size:11px !important;
    line-height:16px;
    padding:2px 8px;
    text-decoration:none;
    color: #1c9999;
    background:#ffba2f url(../img/button_bg.gif) repeat-x scroll left
top;
}
img {
    border: 0px;
}
#header {
    width: 100%;
    height: 50px;
    background: #ff8d2f url(../img/header_bg.gif) repeat-x;
}
#menu {
    width: 100%;
    height: 25px;
    background: #ff8d2f url(../img/menu_bg.gif) repeat-x;
    border: 1px solid #1c9999;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li h1 {
    font-size: 12px;
}
li > ul {
    top: auto;
    left: auto;
}
li:hover ul {
    display: block;
}
ul.submenu {
    background: #1c9999 url(../img/menu_dropdown_bg.gif) repeat-x;
    border: 1px solid #1c9999;
    padding: 3px;
}
ul.submenu li {
    color: white;
    font-size: 12px;
    min-width: 150px;
}
ul.submenu li a {
    color: white;
    text-decoration: none;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 12px;
}
ul.submenu li a:hover {
    font-weight: bolder;
}

Response title

Attachments

jQuery Forum

Activity Trend