Re: [jQuery] Re: jQuery Validate using input type=image

Styling <button>s is quite flexible. Start with border:none, the rest should be easy.

Jörn

On Mon, Nov 30, 2009 at 12:51 PM, Rich <reholmes27@googlemail.com> wrote:

Thanks that does pass the required value but I'll need to play around
with styling the button as I don't want the image to appear as an icon
and not as a button.

Thanks

On Nov 27, 5:20 pm, Jörn Zaefferer <joern.zaeffe...@googlemail.com>
wrote:

> The plugin handles that case, though only for type="submit". You could try
> using a button instead:
>
> <button type="submit"><img ... /></button>
>

> JörnOn Fri, Nov 27, 2009 at 12:52 PM, Rich <reholme...@googlemail.com> wrote:
> > I am validating a form that is submitted by an image input (input
> > type=image), there are 3 of these inputs which either publish, save or
> > delete the form details. If I turn javascript off and submit the form
> > I can pick up the value of the input button used. i.e. request.form
> > ("publish.x") = ?, if I turn javascript on and use the jQuery validate
> > plugin it does everything excpet pass the value of the button pressed
> > so I can't detect which button has been pressed. Any help appreciated.
>
> > [code]
> > $(function() {
> >        $("#vml_library").validate({
> >                ignore: "input[type=hidden]",
> >                rules: {
> >                        mName: {
> >                                required: true
> >                        },
> >                        mSummary: {
> >                                maxlength: 200
> >                        },
> >                        mDescription: {
> >                                required: true
> >                        },
> >                        mFile: {
> >                                required: true,
> >                                accept:
> > ""+$("input[name=typeList]").val().replace(/\'/g,
> > '').replace(/\./g, '').replace(/,/g, '|') +""
> >                        },
> >                        tFile: {
> >                                required: function(element) {
> >                                        return $("input[name=vType]").val()
> > > 1;
> >                                },
> >                                accept: true
> >                        }
> >                },
> >                messages: {
> >                        mName: {
> >                                required: "Required"
> >                        },
> >                        mFile: {
> >                                required: "Required",
> >                                accept: "Invalid File, must be " +
> > $("input[name=typeList]").val()
> >                        },
> >                        mSummary: {
> >                                maxlength: "You may not use anymore than 200
> > characters"
> >                        },
> >                        mDescription: {
> >                                required: "Required"
> >                        },
> >                        tFile: {
> >                                required: "Required",
> >                                accept: "Invalid File, must be '.jpg',
> > '.jpeg', '.gif' or '.png'"
> >                        }
> >                },
> >                success: function(label) {
> >                        label.addClass("valid").text("OK!");
> >                },
> >                highlight: function(element, errorClass) {
> >                        $(element).addClass("errorInput");
> >                },
> >                unhighlight: function(element, errorClass) {
> >                        $(element).removeClass("errorInput");
> >                },
> >                submitHandler: function(form) {
> >                        ShowProgress();
> >                        form.submit();
> >                }
> >        });
>
> > });
> > [/code]