[jQuery] [Validate] tabs - validate per tab - disable moving forward if invalid
Working example: http://www.williamworley.com/jquery/createposting.php So I seemed to have figured out a way to get this to work correctly but its more code than I would like for using jquery. Basically what I've done is make it so you have form validation using Jorns Validation Plugin per tab when using the jquery tabs. There are a few issues though Issues: A lot of code to do something this simple All tabs to the right of the current tab have to be disabled due to me not being able to get the first invalid element focus to work (switch to the tab with the invalid element). Please let me know if anyone has a cleaner (less code) way to validate per tab or get the focus first invalid element working.
[jQuery] Exception errors when using validation rules in 1.3.1
Basically i'm having issues with the validation rules not working in
1.3.1 i read that some of the issues with value="" was fixed but i
think it could be back again but i'm not sure. i created some jing
videos so you can see it more clearly the exception i'm getting is
this in firebug
[Exception... "'Syntax error, unrecognized expression:
[...@for='license']' when calling method:
[nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING)" location: "" data: no]
1.3.1
http://screencast.com/t/8eC3Yfqz
1.2.6 works perfect
http://screencast.com/t/HGieduTD
same code not sure what to say or do can someone help me out?
jquery
var container = $('div.container');
$('#addlicense').validate({
submitHandler: function() {
$.ajax({
type: 'POST',
url: 'process.php?cmd=addlicense',
dataType: 'html',
data: { issuedby: $('#issuedby').val(),
license: $
('#license').val(), licensenum: $('#licensenum').val(), issueddate: $
('#issueddate').val(), expiredate: $('#expiredate').val(), licenseid: $
('#licenseid').val(), action: $('#action').val(), noexpire: $("input
[name='noexpire']:checked").val() },
success: function(data){
$('#licenseresult').prepend(data);
},
error: function(){
alert("An error has occurred. Please try
again.");
},
complete: function() {
$('#results').fadeIn('slow');
$('#licensenew').colorBlend([{ fromColor:
'#F3F3F3', toColor:
'#33CC33', param: 'backgroundColor', cycles: 1 }]);
$("#addlicense").slideUp();
$("#nolicense").hide();
$("#licensectr").show();
}
});
return false;
},
onkeyup:false,
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: 'li',
meta: "validate",
rules: {
license: {
required: true
},
licensenum: {
required: true
},
issuedby: {
required: true
},
issueddate: {
required: true
},
expiredate: {
required: {
required: true,
depends: function(element) {
return
$("#noexpire:checked")
}
}
}
},
messages: {
license: {
required: "License Name Description is
required"
},
licensenum: {
required: "License number ID is
required"
},
issuedby: {
required: "Issued by is required"
},
issueddate: {
required: "Date Issued is required"
},
expiredate: {
required: "Expires On is required"
}
}
});
[jQuery] Exception errors when using validation rules
Hi everyone, i'm getting a weird exception with 1.3.1 please see the
video link to watch what happens.
http://screencast.com/t/4Ih9rhKwZP
and if you don't watch the video i'm doing an ajax submit but it's
refreshing the page and throwing the error
exception:
[Exception... "'Syntax error, unrecognized expression:
[...@for='license']' when calling method:
[nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING)" location: "" data: no]
jquery
var container = $('div.container');
$('#addlicense').validate({
submitHandler: function() {
$.ajax({
type: 'POST',
url: 'process.php?cmd=addlicense',
dataType: 'html',
data: { issuedby: $('#issuedby').val(),
license: $
('#license').val(), licensenum: $('#licensenum').val(), issueddate: $
('#issueddate').val(), expiredate: $('#expiredate').val(), licenseid: $
('#licenseid').val(), action: $('#action').val(), noexpire: $("input
[name='noexpire']:checked").val() },
success: function(data){
$('#licenseresult').prepend(data);
},
error: function(){
alert("An error has occurred. Please try
again.");
},
complete: function() {
$('#results').fadeIn('slow');
$('#licensenew').colorBlend([{ fromColor:
'#F3F3F3', toColor:
'#33CC33', param: 'backgroundColor', cycles: 1 }]);
$("#addlicense").slideUp();
$("#nolicense").hide();
$("#licensectr").show();
}
});
return false;
},
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: 'li',
meta: "validate",
rules: {
license: {
required: true
},
licensenum: {
required: true
},
issuedby: {
required: true
},
issueddate: {
required: true
},
expiredate: {
required: {
required: true,
depends: function(element) {
return
$("#noexpire:checked")
}
}
}
},
messages: {
license: {
required: "License Name Description is
required"
},
licensenum: {
required: "License number ID is
required"
},
issuedby: {
required: "Issued by is required"
},
issueddate: {
required: "Date Issued is required"
},
expiredate: {
required: "Expires On is required"
}
}
});
[jQuery] Re: Exception errors when using validation rules
problem solved
Jörn has a new version 1.5.1 of jquery.validate.js
So for anyone who stumbles upon this you CANNOT run
jquery.validate.js
$Id: jquery.validate.js 5952 2008-11-25 19:12:30Z
with
jQuery 1.2.6
$Date: 2008-05-24 14:22:17 -0400 (Sat, 24 May 2008) $
$Rev: 5685 $
you MUST upgrade to the following
jquery.validate.js
$Id: jquery.validate.js 6096 2009-01-12 14:12:04Z
with jquery 1.3.1
Date: 2009-01-21 20:42:16 -0500 (Wed, 21 Jan 2009)
Revision: 6158
On Mar 4, 1:14 pm, James wrote:
> The part:
> [Exception... "'Syntax error, unrecognized expression:
> [...@for='license']' when calling method:
>
> tells you that somewhere in your code you have the expression
> [...@for='license']' that is unrecognized.
> Remove the @ sign as that is no longer valid from jQuery 1.3.
> Make sure you have the latest version of Validate plug-in also that
> supports jQuery 1.3.
>
> On Mar 3, 7:17 pm, "wwor...@gmail.com" wrote:
>
>
>
> > Hi everyone, i'm getting a weird exception with 1.3.1 please see the
> > video link to watch what happens.
>
> >http://screencast.com/t/4Ih9rhKwZP
>
> > and if you don't watch the video i'm doing an ajax submit but it's
> > refreshing the page and throwing the error
>
> > exception:
> > [Exception... "'Syntax error, unrecognized expression:
> > [...@for='license']' when calling method:
> > [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e
> > (NS_ERROR_XPC_JS_THREW_STRING)" location: "" data: no]
>
> > jquery
> > var container = $('div.container');
> > $('#addlicense').validate({
> > submitHandler: function() {
> > $.ajax({
> > type: 'POST',
> > url: 'process.php?cmd=addlicense',
> > dataType: 'html',
> > data: { issuedby: $('#issuedby').val(),
> > license: $
> > ('#license').val(), licensenum: $('#licensenum').val(), issueddate: $
> > ('#issueddate').val(), expiredate: $('#expiredate').val(), licenseid: $
> > ('#licenseid').val(), action: $('#action').val(), noexpire: $("input
> > [name='noexpire']:checked").val() },
> > success: function(data){
> > $('#licenseresult').prepend(data);
> > },
> > error: function(){
> > alert("An error has occurred. Please
> > try again.");
> > },
> > complete: function() {
> > $('#results').fadeIn('slow');
> > $('#licensenew').colorBlend([{
> > fromColor: '#F3F3F3', toColor:
> > '#33CC33', param: 'backgroundColor', cycles: 1 }]);
> > $("#addlicense").slideUp();
> > $("#nolicense").hide();
> > $("#licensectr").show();
> > }
> > });
> > return false;
> > },
> > errorContainer: container,
> > errorLabelContainer: $("ul", container),
> > wrapper: 'li',
> > meta: "validate",
> > rules: {
> > license: {
> > required: true
> > },
> > licensenum: {
> > required: true
> > },
> > issuedby: {
> > required: true
> > },
> > issueddate: {
> > required: true
> > },
> > expiredate: {
> >
[jQuery] Modal Form & Validation + JSON call
can't seem to get the "button" for the modal to fire off the event for
validate can anymore see what i'm doing wrong here?
$(function() {
var name = $("#name"),
email = $("#email"),
message = $("#message"),
allFields = $([]).add(name).add(email).add(message),
container = $('div.container');
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
resizable: false,
height: 450,
width: 350,
modal: true,
buttons: {
'Email Resume': function() {
$("#emailresume").validate({
submitHandler:
function() {
$.ajax({
type: 'POST',
url:
'process.php?cmd=emailresume',
dataType:
'html',
data: { name:
$('#name').val(), email: $('#email').val(),
message: $('#message').val() },
success:
function(data){
$(this).dialog('close');
},
error:
function(){
alert("An
error has occurred. Please try again.");
},
complete:
function() {
$("#success").show();
$("#success").fadeOut(6000);
}
});
return false;
},
errorContainer:
container,
errorLabelContainer:
$("ul", container),
wrapper: 'li',
meta: "validate",
rules: {
name: {
required: true,
minlength: 3,
maxlength: 40
}
},
messages: {
name: {
required: "Name is required",
minlength: jQuery.format("Name is, minimum of {0}
characters"),
maxlength: jQuery.format("Name is, maximum of {0}
characters")
}
}
});
//return false;
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
$('#emailresume').click(function() {
$('#dialog').dialog('open');
});
});
[jQuery] Re: Modal Form & Validation + JSON call
Jorn i think you might be able to help with this as it relates to your
validate stuff, again any help is great.
I did find some post relating to removing the submit handler for the
modal buttons but not sure how to get that to work, tried a few things
and couldn't get it to work.
On Apr 7, 11:07 pm, "wwor...@gmail.com" wrote:
> can't seem to get the "button" for the modal to fire off the event for
> validate can anymore see what i'm doing wrong here?
>
> $(function() {
> var name = $("#name"),
> email = $("#email"),
> message = $("#message"),
> allFields = $([]).add(name).add(email).add(message),
> container = $('div.container');
>
> $("#dialog").dialog({
> bgiframe: true,
> autoOpen: false,
> resizable: false,
> height: 450,
> width: 350,
> modal: true,
> buttons: {
> 'Email Resume': function() {
> $("#emailresume").validate({
> submitHandler:
> function() {
> $.ajax({
> type:
> 'POST',
> url:
> 'process.php?cmd=emailresume',
> dataType:
> 'html',
> data: {
> name: $('#name').val(), email: $('#email').val(),
> message: $('#message').val() },
> success:
> function(data){
>
> $(this).dialog('close');
> },
> error:
> function(){
> alert("An
> error has occurred. Please try again.");
> },
> complete:
> function() {
>
> $("#success").show();
>
> $("#success").fadeOut(6000);
> }
> });
> return false;
> },
> errorContainer:
> container,
> errorLabelContainer:
> $("ul", container),
> wrapper: 'li',
> meta: "validate",
> rules: {
> name: {
>
> required: true,
>
> minlength: 3,
>
> maxlength: 40
> }
> },
> messages: {
> name: {
>
> required: "Name is required",
>
> minlength: jQuery.format("Name is, minimum of {0}
> characters"),
>
> maxlength: jQuery.format("Name is, maximum of {0}
> characters")
> }
>
[jQuery] Re: Modal Form & Validation + JSON call
i was able to get it to work but i couldn't use the built in buttons
option for the dialog
$(function() {
var name = $("#name"),
email = $("#email"),
message = $("#message"),
allFields = $([]).add(name).add(email).add(message),
container = $('div.container');
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
resizable: false,
height: 450,
width: 350,
modal: true,
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
$("#emailresume").validate({
submitHandler: function() {
$.ajax({
type: 'POST',
url: 'process.php?cmd=emailresume',
dataType: 'html',
data: { name: $('#name').val(),
email: $('#email').val(),
message: $('#message').val() },
success: function(data){
$("#dialog").dialog('close');
},
error: function(){
alert("An error has occurred.
Please try again.");
},
complete: function() {
$("#success").show();
$("#success").fadeOut(6000);
}
});
return false;
},
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: 'li',
meta: "validate",
rules: {
name: {
required: true,
minlength: 3,
maxlength: 40
}
},
messages: {
name: {
required: "Name is required",
minlength: jQuery.format("Name
is, minimum of {0} characters"),
maxlength: jQuery.format("Name
is, maximum of {0}
characters")
}
}
});
$('#emailresumebox').click(function() {
$('#dialog').dialog('open');
});
});
Please correct the errors below
Name to send
to
Email to send
to
Message(optional)
On Apr 8, 9:11 am, "Richard D. Worth" wrote:
> It's possible you're having an issue because the dialog content element is
> moved to the end of the body. So if that element contains form elements,
> rather than an entire form, they'll be removed from the form. For more info
> (including some work-arounds) see
>
> http://groups.google.com/group/jquery-ui-dev/browse_thread/thread/1e9...
>
> For any further help with the jQuery UI Dialog, note there's a separate
> mailing list for jQuery UI help:
>
> http://groups.google.com/group/jquery-ui
>
> - Rich
