Tuesday, March 31, 2009

[jQuery] Re: Catching document.forms['formid'].submit() with jquery validator

Thanks so much for the reply Jorn (and the great plugin). My problem
is a little more complicated as the jsf controls put more javascript
statements than the document.forms['asdf'].submit() in the onclick
handler. More troubling yet, sometimes the form submit (again with
other js) is in the href. I've tried a few things but what works for
me is below. Basically, i catch the onmousedown event (which has no
code in it). If the form is valid, i allow the onclick to run (by not
setting it to ''). If it is not valid, I put the onclick function in
a temp variable and set it to '', so that it won't run. Works pretty
slick.

/** ===================================================== **/
/** Use to escape : and . in jsf id's **/
/** ===================================================== **/
function jq(myid) {
return "#" + myid.replace(/:/g,"\\:").replace(/\./g,"\\.");
}
/** ===================================================== **/
/** Use to escape : and . in jsf id's used in strings **/
/** ===================================================== **/
function esc(myid) {
return myid.replace(/:/g,"\\\\:").replace(/\./g,"\\\\.");
}

var debug = true;


/** ===================================================== **/
/** Run (jquery) when the document is loaded **/
/** ===================================================== **/
$(document).ready(function(){

if (debug) {
$("form").submit(
function() {
//alert("Submit Pressed");
}
);
}

// validate each form
$("form").each(function( intIndex ){
$(this).validate();
});

$("a").each(function( intIndex ){
var onclick = '';
if ($(this).attr("onclick") != undefined && $(this).attr
("onclick").toString().search(/\.submit\(\)/) > -1 ) {

$(this).mousedown(function(event){
var $target = $(event.target);
if ($target.hasClass("cancel") || $(this).parents('form').valid())
{
if (onclick != '') {
$target.attr('onclick',onclick);
}
} else {
if ($target.attr('onclick') != '') {
onclick = $target.attr('onclick');
$target.attr('onclick','');
}
}
});

}


if ($(this).attr("href") != undefined && $(this).attr
("href").toString().search(/\.submit\(\)/) > -1 ) {
var href = '#';
$(this).mousedown(function(event){
var $target = $(event.target);
if ($target.hasClass("cancel") || $(this).parents('form').valid())
{
if (href != '#') {
$target.attr('href',href);
}
} else {
if ($target.attr('href') != '#') {
href = $target.attr('href');
$target.attr('href','#');
}
}
});

}
});

}); // $(document).ready(function(){

On Mar 30, 2:23 pm, Jörn Zaefferer <joern.zaeffe...@googlemail.com>
wrote:
> The only approach I see is to find all those inline event handlers and
> replace them with something that goes through the jQuery event chain,
> including validation.
>
> Something like this:
>
> $("a[onclick]").each(function() {
>   this.onclick = function() {};
>   $("#form").submit();
>
> });
>
> Jörn
>
> On Mon, Mar 30, 2009 at 3:57 PM, Yeuker <yeu...@gmail.com> wrote:
>
> > For those of you who frequent the jqueryhelp.com pages, forgive my
> > question here as well.
>
> > I am using the excellent jquery validation plugin found here:
>
> >http://docs.jquery.com/Plugins/Validation
>
> > It works incredibly well and am very happy with it (thanks).  My
> > problem is that sometimes my forms are submitted via document.forms
> > ['formid'].submit().  I have no control over this statement as it is
> > generated for me by jsf when it is rendering the element, which in my
> > case is an anchor.
>
> > Because it is getting submitted via document.forms['formid'].submit(),
> > the jquery validation plugin does not catch this submit, therefor does
> > not validate, therefor submits the form when it shouldn't.  I've been
> > stuck here for quite some time and could really use some help on how
> > to get jquery to validate when a form is submitted this way.  Any help
> > would be greatly, greatly appreciated.
>
> > I have posted some code below that shows that the submit handler does
> > not catch the javascript submit.
>
> > <form name="aform" id="aform">
> >   <input type="submit" /><br/>
> >   <a href="#" onclick="$('#aform').submit();">submit with jquery</
> > a><br/>
> >   <a href="#" onclick="document.forms['aform'].submit();">submit with
> > old js</a>
> > </form>
>
> > <script type="text/javascript">
>
> >   $(document).ready(function(){
> >      $("#aform").submit(
> >         function(){ alert("Submitted"); });
> >   });
> > </script>
>
> > Thanks so much,
>
> > Yeuker
>
>

No comments: