Jquery validation problem

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

LVL 2
PanosAsked:
Who is Participating?
 
dgrafxConnect With a Mentor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
PanosAuthor Commented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Michel PlungjanIT ExpertCommented:
So don't make it green... Add an animated gif
0
 
PanosAuthor Commented:
This is a good idea but i will need help to do this.
0
 
dgrafxCommented:
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
 
PanosAuthor Commented:
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
 
dgrafxCommented:
if you look at your code above in your first post put $('#spinner').hide(); on line 30

good luck
0
 
PanosAuthor Commented:
spinner is showing but not hiding dgrafx
0
 
dgrafxCommented:
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
 
PanosAuthor Commented:
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
 
dgrafxCommented:
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
 
dgrafxCommented:
NOTE: remove the double ## from the js - IMPORTANT - long story ...
0
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
the alert did work. i removed that line
0
 
dgrafxCommented:
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
 
PanosAuthor Commented:
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
 
dgrafxCommented:
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
 
PanosAuthor Commented:
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
 
dgrafxCommented:
Can you put the show code back in the buttons onclick
0
 
PanosAuthor Commented:
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
 
dgrafxCommented:
can you post code that is just the validation  and prove that the validation is working
0
 
PanosAuthor Commented:
I made a test page.
Take a look
http://infotech.selfip.com/test.html
0
 
PanosAuthor Commented:
dgrafx i suppose you are not online.
i will close this test page.
may be you can take a look tomorrow.
0
 
dgrafxCommented:
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
 
PanosAuthor Commented:
Hi dgrafx
The page is available now. Please make a check.
I'm waiting for changes.
0
 
dgrafxCommented:
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
 
PanosAuthor Commented:
hi.
please check it again. my delay function was wrong. Now it is working.
0
 
PanosAuthor Commented:
dgrafx don't forget that the url validation will return only false for this test page!!
0
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
tehank you
regards panos
0
 
dgrafxCommented:
thanks for the points ...
have a good weekend!
0
All Courses

From novice to tech pro — start learning today.