Search jQuery

jQuery Forum

Screen name:
jfeyers

jfeyers's Profile

2 Posts

4 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Using validation with selectmenu (some tips)
[0Replies]
- 15-Nov-2012 01:12 PM
- Forum: Using jQuery UI
Hi,
After struggling a bit with getting this working...I figured I would share my findings.

I have a dynamic form with an arbitrary number of textboxes, dropdowns , and radio fields. The jquery selectmenu ui is applied to my dropdowns. "Required" validation needs to be applied to all textboxes and dropdowns. The first item in the dropdown has a blank value. When validation fails, a message should appear below the field and the field itself should highlight red. The error class applied is not he default "error". It is instead, "input-validation-error". On top of the highlight, a message should be displayed below the drop-down. So the question is, how do we wire up the selectmenu fields with validation? Below is the answer.

First, the "required" class must be applied to the select element:
2. <select name="ddl_3" id="ddl_3" class="required">
3. <option value="">-- select option --</option>
4. <option value="1">Options 1</option>
5. <option value="2">Options 2</option>
6. </select>
8. <div class="clear"></div>
9. <span errorfor="ddl_3"></span>
Second, since the selectmenu widget actually hides the select element and generates div span and anchor elements that make up the fancy looking drop-down, we need to tell the validation object that we should include hidden elements in its collection of elements to validate. We do this by adding the ignore option to the validate object with a value of "". I can't take credit for finding this....https://github.com/fnagel/jquery-ui/issues/195
Third, if validation fails, we need to highlight the selectmenu. To do so, we need to use the invalidHandler option of validate. In this event, we will loop through each item in the errorList and find the ones that have a "nodeName" of 'select' and add the "input-validation-error" class to the next div sibling. See code at the bottom.

Fourth, we need remove or add the "input-validation-error" class from the div sibling and revalidate the field when the user changes the value. We do this with $.change event handler. Again see code below.

I hope this helps some people.
2. $(function () {
3. $('select[name^="ddl_"]').change(function () {
4. var selValue = $(this).val();
5. $("#myform").validate().element(this);
6. if (selValue.length > 0) {
7. $(this).next('div').removeClass("input-validation-error");
8. }
9. else {
10. $(this).next('div').addClass("input-validation-error");
11. }
12. });
15. $("#myform").validate({
16. errorElement: "span",
17. ignore: "",
18. invalidHandler: function (form, validator) {
19. $.each(validator.errorList, function (index, value) {
20. if (value.element.nodeName.toLowerCase() == 'select') {
21. $(value.element).next('div').addClass("input-validation-error");
22. }
23. });
24. },
25. errorClass: "field-validation-error",
26. highlight: function (element, errorClass) {
27. $(element).addClass("input-validation-error");
28. },
29. unhighlight: function (element, errorClass) {
30. $(element).removeClass("input-validation-error");
31. },
32. errorPlacement: function (error, element) {
33. error.insertAfter($('span[errorfor="' + element.attr("name") + '"]'));
34. },
35. messages: {
36. email: "Please enter a valid email address."
37. }
38. });
39. });

[jQuery] jqModal problem in firefox not firing ready
[2Replies]
- 08-Jan-2009 02:03 PM
- Forum: Using jQuery
Hi everyone,
I have a basic jqModal page:
-------------------------------------------------------------------------------
<html>
....... blah blah
<div class="jqmAlert" id="ex3b" >
    <div id="ex3b" class="jqmAlertWindow" style="width:580px;" >
    <div class="jqmAlertTitle clearfix" >
         # <em>Close</em>
        </div>

<div class="jqmAlertContent">

Please wait... '<?php echo base_url()."images/busy.gif"? '
alt="loading" />

</div>
    </div>
</div>
....... blah blah
</html>
<script type="text/javascript">

        $().ready(function(){

            // select + reference "triggering element" -- will pass to $.jqm()
             var triggers = $(".ex3bTrigger");
                var t = $('div.jqmAlertContent');
             // NOTE; we could have used document.getElementById(), or selected
             // multiple elemets with $(..selector..) and passed the trigger
             // as a jQuery object. OR, just include the string '#ex3btrigger'
             // as the trigger parameter (as typically demonstrated).

             // NOTE; we supply a target for the ajax return. This allows us
             // to keep the structure of the alert window. An element can
             // also be passed (see the documentation) as target.

            $('#ex3b')
        //$('#ex3b').jqResize('.jqResize')
             $('#ex3b').jqm({
                 overlay: 88,
                zIndex: 1000,
                modal: false,
                trigger: triggers,
                ajax: '@href',
                //the following creates a fade effect...
                //onHide: function(h) {
                 //t.html('Please Wait...'); // Clear Content HTML on Hide.
                 // h.o.remove(); // remove overlay
                 //h.w.fadeOut(888); // hide window
                //},
                target: t
                })
                .jqDrag('.jqmAlertTitle');

             // Close Button Highlighting. IE doesn't support :hover. Surprise?
             if($.browser.msie) {
             $('div.jqmAlert .jqmClose')
             .hover(
                function(){ $(this).addClass('jqmCloseHover'); },
                function(){ $(this).removeClass('jqmCloseHover'); });
             }
        });
</script>
---------------------------------------------------------------------------------
I load via ajax a php that contains the following jquery script that creates
a image preview when hovering over some thumbnails:
-------------------------------------------------------------------------------
html
....... blah blah
echo' a target="_blank" href="'.base_url().$image1full.'" class="preview" >
< i m g border="0" src="'.base_url().$image1.'" width="80" height="60";
....... blah blah
/html
this.imagePreview = function(){
    /* CONFIG */

        xOffset = 30;
        yOffset = 20;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.preview").hover(function(e)
    {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";

        $("body").append("<p id='preview'> "+ this.href +" "+ c +"
");
        $("#preview")
            .css("top",(e.pageY - xOffset - ($("#preview").height())) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");
},
    function()
    {
        this.title = this.t;
        $("#preview").remove();
});    //end of a.preview hover function

    $("a.preview").mousemove(function(e)
    {
        $("#preview")
            .css("top",(e.pageY - xOffset - ($("#preview").height()) ) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });    //end of a.preview mousemove function


    //handle previewleft
    $("a.previewleft").hover(function(e)
    {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='previewleft'> "+ this.href +" "+ c +"
");
        $("#previewleft")
            .css("top",(e.pageY - xOffset - ($("#previewleft").height())) + "px")
            .css("left",(e.pageX - yOffset - $("#previewleft").width()) + "px")
            .fadeIn("fast");
},
    function()
    {
        this.title = this.t;
        $("#previewleft").remove();
});    //end of a.preview hover function

    $("a.previewleft").mousemove(function(e)
    {
        $("#previewleft")
            .css("top",(e.pageY - xOffset - ($("#previewleft").height())) + "px")
            .css("left",(e.pageX - yOffset - $("#previewleft").width()) + "px");
    });    //end of a.preview mousemove function

    //handle previewmiddle
    $("a.previewmiddle").hover(function(e)
    {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='previewmiddle'> "+ this.href +" "+ c +"
");
        $("#previewmiddle")
            .css("top",(e.pageY - xOffset - $("#previewmiddle").height()) + "px")
            .css("left",(e.pageX - yOffset - ($("#previewmiddle").width()/2)) + "px")
            .fadeIn("fast");
},
    function()
    {
        this.title = this.t;
        $("#previewmiddle").remove();
});    //end of a.preview hover function

    $("a.previewmiddle").mousemove(function(e)
    {
        $("#previewmiddle")
            .css("top",(e.pageY - xOffset - $("#previewmiddle").height()) + "px")
            .css("left",(e.pageX - yOffset - ($("#previewmiddle").width()/2)) +
"px");
    });    //end of a.preview mousemove function
};
// starting the script on page load
$().ready(function(){
    imagePreview();
});
--------------------------------------------------------------------------------
This all works fine in IE 7, but not in Firefox 3.0.3. No errors are thrown.
Upon debugging, ready is never fired. Nor is any of the hover functions.
Any ideas?
Thanks in advance...
Kid_Niki
--
View this message in context: http://www.nabble.com/jqModal-problem-in-firefox-not-firing-ready-tp20352990s27240p20352990.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend