Solved

Jquery validation problem

Posted on 2012-04-06
34
1,373 Views
Last Modified: 2012-04-14
Hello experts.
I'm using jquery validation plugin for my form validation and i have a little problem.
I have a form with three text fields.
The first two are required (i use addClassRules)
The third one is required,it must be a url and final i'm checking if this url exists -using a remote page.
The problem i have is that submiting the form ,if i have add a url to the third field it gets first a class - valid and when remote check is finished and the returned value is false i get a class - error for the field.
It takes 3-4 seconds to complete the remote - check and it is not so good for a user.
Any idea how to solve this?
(maybe show the messages when validation is finished or show a popup window with a message until validation finished)
<script type="text/javascript">
$(document).ready(function () {
var d2 = $("#formuploadfileurl");
    $.validator.addClassRules({
        userfilenameclass3: {
            required: true,
        }
    });
    // overwrite default messages
    $.extend($.validator.messages, {
        required: "Required field"
    });
	    $(d2).validate({
        rules: {
            fileurl: {
                required: true,
                url: true,
                remote: "actions/actcheckfileurl.cfm"
            }
        },
        messages: {
            fileurl: {
                required: "Required field",
                url: "Wrong url",
                remote: "Url is not responding"
            }
        }

    })

});
</script>
<form id="formuploadfileurl" name="formuploadfileurl" method="post" action="filemanager/dofilemanager.cfm">
 <input type="text" value="" size="40" class="userfilenameclass3" name="userfilename3">
 <input type="text" value="" size="40" class="userfilenameclass3" name="userfilename2">
 <input type="text" value="" size="40" id="fileurl" name="fileurl">
 <input type="hidden" value="1" name="itemid">
 <button name="Submit" type="submit">+ Add</button>
</form>

Open in new window

<script type="text/javascript">
$(document).ready(function () {
var d2 = $("#formuploadfileurl");
    $.validator.addClassRules({
        userfilenameclass3: {
            required: true,
        }
    });
    // overwrite default messages
    $.extend($.validator.messages, {
        required: "Required field"
    });
	    $(d2).validate({
        rules: {
            fileurl: {
                required: true,
                url: true,
                remote: "actions/actcheckfileurl.cfm"
            }
        },
        messages: {
            fileurl: {
                required: "Required field",
                url: "Wrong url",
                remote: "Url is not responding"
            }
        }

    })

});
</script>
<form id="formuploadfileurl" name="formuploadfileurl" method="post" action="filemanager/dofilemanager.cfm">
 <input type="text" value="" size="40" class="userfilenameclass3" name="userfilename3">
 <input type="text" value="" size="40" class="userfilenameclass3" name="userfilename2">
 <input type="text" value="" size="40" id="fileurl" name="fileurl">
 <input type="hidden" value="1" name="itemid">
 <button name="Submit" type="submit">+ Add</button>
</form>

Open in new window

0
Comment
Question by:Panos
  • 17
  • 13
  • 2
34 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37815321
If you show a throbber/please wait and then for example show the favicon from the site you checked or a green tick when checked?
I do not see how the user would be too bothered if he knows you are simply checking that the site exists
0
 
LVL 2

Author Comment

by:Panos
ID: 37815331
Hi mplungjan
The user don't knows that the validation is not finished.
He sees a field that is getting green and after 4 second red with a messages "Url is not responding"
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37815334
So don't make it green... Add an animated gif
0
 
LVL 2

Author Comment

by:Panos
ID: 37815337
This is a good idea but i will need help to do this.
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37842275
just download some type of spinning little animated gif
then:

<button name="Submit" type="submit" onclick="$('#spinner').show();">+ Add</button>
<img src="spinner.gif" id="spinner" style="display:none;">

then in your js - after validation success (or whenever) you can hide it again like : $('#spinner').hide();
0
 
LVL 2

Author Comment

by:Panos
ID: 37842475
Hi  dgrafx
Take a look in my code. Where can i put $('#spinner').hide();
I want to hide the spinner when validation is finished.
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37842558
if you look at your code above in your first post put $('#spinner').hide(); on line 30

good luck
0
 
LVL 2

Author Comment

by:Panos
ID: 37842650
spinner is showing but not hiding dgrafx
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37842710
well let's see - you want to put it where your validator has finished and either says OK or NOT OK - then hide it and do whatever like display a message.
try using an alert to test where to put it.
just put alert(""); on the line 30 or see below.
maybe it's the correct place but the image isn't showing for some reason ??

or try it here:
messages: {
            fileurl: {
                required: "Required field",
                url: "Wrong url",
                remote: "Url is not responding"
            }
        }
      $('#spinner').hide();
0
 
LVL 2

Author Comment

by:Panos
ID: 37842728
I get a syntax error
$(document).ready(function () {
var d2 = $("#formuploadfileurl");
    $.validator.addClassRules({
        userfilenameclass3: {
            required: true,
        }
    });
    // overwrite default messages
    $.extend($.validator.messages, {
        required: "Required field"
    });
	    $(d2).validate({
        rules: {
            fileurl: {
                required: true,
                url: true,
                remote: "actions/actcheckfileurl.cfm"
            }
        },
        messages: {
            fileurl: {
                required: "Required field",
                url: "Wrong url",
                remote: "Url is not responding"
            }
        }
     $('#spinner').hide(); 
    })
 });

Open in new window

0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37843030
ok - i made some changes
$(document).ready(function () {
var d2 = $("#formuploadfileurl");
    $.validator.addClassRules({
        userfilenameclass3: {
            required: true,
        }
    });
    // overwrite default messages
    $.extend($.validator.messages, {
        required: "Required field"
    });
$(".submit").live("click", function() {	
	$('#spinner').show();
	$(d2).validate({
		rules: {
		    fileurl: {
		        required: true,
		        url: true,
		        remote: "actions/actcheckfileurl.cfm"
		    }
		},
		messages: {
		    fileurl: {
		        required: "Required field",
		        url: "Wrong url",
		        remote: "Url is not responding"
		    }
		}
	});	
	alert("");
	$('#spinner').hide();
	return false;
});
});

<form id="formuploadfileurl">
<input type="text" name="tester">
<button class="submit" type="submit">+ Add</button>
</form>

Open in new window


CHANGES:
the id you send in to validate is the id of your form - not your text field
I removed name="Submit" from your button - it shouldn't be needed
I added class="submit" to your button so it will trigger the script - see the js
I put spinner.show in the js and out of the button.
It's cleaner BUT sometimes there is an issue where jquery executes code before it shows the spinner
IF that happens just put it back into the onclick of the button

try this and let me know ...
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37843036
NOTE: remove the double ## from the js - IMPORTANT - long story ...
0
 
LVL 2

Author Comment

by:Panos
ID: 37843187
dgrafx
I tried the code but nothing happens. (the double ## signs are because of coldfusion server lng)
I removed them in my test page.
<script type="text/javascript">
$(document).ready(function () {
var d2 = $("#formuploadfileurl");
    $.validator.addClassRules({
        userfilenameclass3: {
            required: true,
        }
    });
    // overwrite default messages
    $.extend($.validator.messages, {
        required: "Required field"
    });
$(".submit").live("click", function() {      
      $('#spinner').show();
      $(d2).validate({
            rules: {
                fileurl: {
                    required: true,
                    url: true,
                    remote: "actions/actcheckfileurl.cfm"
                }
            },
            messages: {
                fileurl: {
                    required: "Required field",
                    url: "Wrong url",
                    remote: "Url is not responding"
                }
            }
      });      
      $('#spinner').hide();
      return false;
});
});
</script>
<form id="formuploadfileurl"  method="post" action="filemanager/dofilemanager.cfm">
 <input type="text" value="" size="40" class="userfilenameclass3" name="userfilename3">
 <input type="text" value="" size="40" class="userfilenameclass3" name="userfilename2">
 <input type="text" value="" size="40" id="fileurl" name="fileurl">
 <input type="hidden" value="1" name="itemid">
 <button class="submit" type="submit">+ Add</button><img style="display:none" id="spinner" src="images/loading.gif">

Open in new window

0
 
LVL 2

Author Comment

by:Panos
ID: 37843189
the alert did work. i removed that line
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37843228
the spinner show & hide works with the alert still in the code right?
let me know ...
and do you have a closing </form> tag?
0
 
LVL 2

Author Comment

by:Panos
ID: 37843275
I add again the alert to see what 's going on again.
Clicking on the button i get the alert box  and the the spinner show.
Closing the alert box the spinner is hidden again.
That is normal but i don't get any error message from the validation.
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 25

Expert Comment

by:dgrafx
ID: 37843412
thats what i was thinking with the alert
it's your validation thats not doing anything so it hides the image right away ...

look at your code on line 30 of your last code post
replace that line of }); with }).form();
and put the alert back in.

but most importantly i don't believe you have validation code correct
go to jquery's site and make sure your validation code is correct
there must be something wrong somewhere
when you get that figured out use the code I showed you how to show & hide the spinner

I'm sorry but I need to leave right now ...
0
 
LVL 2

Author Comment

by:Panos
ID: 37843491
OK dgrafx
Thank you for your help.
Last information.
The form is validating now but i get the first problem again. the spinner div remains hidden.
I have to leave too.
i hope you will help to get the solution on another day
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37843811
Can you put the show code back in the buttons onclick
0
 
LVL 2

Author Comment

by:Panos
ID: 37844356
hmmm.
<script type="text/javascript">
$(document).ready(function () {
var d2 = $("#formuploadfileurl");
    $.validator.addClassRules({
        userfilenameclass3: {
            required: true,
        }
    });
    // overwrite default messages
    $.extend($.validator.messages, {
        required: "Required field"
    });
$(".submit").live("click", function() {      
      $(d2).validate({
            rules: {
                fileurl: {
                    required: true,
                    url: true,
                    remote: "actions/actcheckfileurl.cfm"
                }
            },
            messages: {
                fileurl: {
                    required: "Required field",
                    url: "Wrong url",
                    remote: "Url is not responding"
                }
            }
      }).form(); 
	  alert("test");   
      $('#spinner').hide();
      return false;
});
});
</script>
<form id="formuploadfileurl"  method="post" action="filemanager/dofilemanager.cfm">
 <input type="text" value="" size="40" class="userfilenameclass3" name="userfilename3"><br />
 <input type="text" value="" size="40" class="userfilenameclass3" name="userfilename2"><br />
 <input type="text" value="" size="40" id="fileurl" name="fileurl"><br />
 <input type="hidden" value="1" name="itemid">
 <button class="submit" type="submit" onclick="$('#spinner').show();">+ Add</button><img style="display:none" id="spinner" src="images/loading.gif">
</form>

Open in new window

Using the alert box i get the spinner. The code is working but it is getting to the alert before completing the remote validation.(i hope you understand me).This is the problem i have from the beginning
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37844417
can you post code that is just the validation  and prove that the validation is working
0
 
LVL 2

Author Comment

by:Panos
ID: 37844485
I made a test page.
Take a look
http://infotech.selfip.com/test.html
0
 
LVL 2

Author Comment

by:Panos
ID: 37845045
dgrafx i suppose you are not online.
i will close this test page.
may be you can take a look tomorrow.
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37846238
i suppose you've taken the test page down ...
it won't load

if you can post it again - remember to include some type of delay (3 seconds) to simulate the attempt to connect to the url
0
 
LVL 2

Author Comment

by:Panos
ID: 37846276
Hi dgrafx
The page is available now. Please make a check.
I'm waiting for changes.
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37846323
i copied the code to look at
i see the validation works BUT there doesn't seem to be any delay while it is checking a url - that's the intention right?

it simply tells you "wrong url" but doesn't connect anywhere ...
what are you doing to connect to the url?

maybe i don't understand ...

I have your code now so i can run it locally so you can take the page down if you want ...
0
 
LVL 2

Author Comment

by:Panos
ID: 37846358
hi.
please check it again. my delay function was wrong. Now it is working.
0
 
LVL 2

Author Comment

by:Panos
ID: 37846359
dgrafx don't forget that the url validation will return only false for this test page!!
0
 
LVL 25

Accepted Solution

by:
dgrafx earned 500 total points
ID: 37846436
ok
i'm going to have to give up ???
i don't understand the core concept of what this fileurl remote settings are - i've never used it.
i always use an ajax get request (I'm sure thats what this is - i just don't know this syntax) and showing a spinner then hiding it when ajax has completed is childs play ...

I did notice that you are using jquery version 1.7 which i'm not using and i recall reading somewhere that validation changed on some version like 6 maybe ...

some of the code that i've been using and have taken for granted just arent working on your page (locally) - i really have to believe it is due to changes in ver 1.7 and possibly in combination with the validate plugin - you want to check also if this is the correct version plugin for 1.7.
i think that was the issue i read about was the incompatibility of the older validate with the newer core jquery

anyway - sorry ...
btw - i can run code very similar to this on my sites
actually it is very very common that a spinner is shown and then when ajax completes you can then hide it
0
 
LVL 2

Author Comment

by:Panos
ID: 37846454
hmmmm.
i downloaded the 1.9 version and the problem remains
May be i will add a new question for form validation without the validation plugin or adding a rule for this case.

Thank you for your try anyway.
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 37846456
tehank you
regards panos
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 37846457
thanks for the points ...
have a good weekend!
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now