Question

I have a jquery function and a javascript validation script running on the forms of my page.

On one form, the input IDs are generated dynamically with “.” – this seems to be causing an issue and breaking the function.

Any obvious work around?

function:

function customAlert(){
    var args = arguments;
    if(args.length > 1) {
        // check that custom alert was called with at least two arguments
        var msg = args[0];
    $(".giftmessaging").removeClass("alertRed");
        $("li").removeClass("alertRed");
        $("input").removeClass("CO_form_alert");
        $("select").removeClass("CO_form_alert");
        var div = $(".errorPopup");
        div.css({"display":"block"});

        div.html(msg);
        for(var i = 1; i < args.length; i++) {
            var inputID = args[i];
           $("#"+inputID).addClass("CO_form_alert");
       $(".giftmessaging").addClass("alertRed");
       $('#' + inputID).focus();
       $('#' + inputID).keydown(function() { $('.errorPopup').hide(); }).change(function() { $('.errorPopup').hide(); });

        }
     }

}

Example validation section:

couponAlert(msg_601,"frmCPN.Number_1")

and an example of the generated ids:

input title="Coupon <%=i%> Coupon Number" type="text" class="CO_PM_VisaCouponsNumberInput<%=redText%>" id ="<%=LLBECOrderConstants.LLB_PAYDEVICE_COUPONFORM%>.<%=LLBECOrderConstants.LLB_PAYDEVICE_NUMBER%>_<%=i%>" name="<%=LLBECOrderConstants.LLB_PAYDEVICE_NUMBER%>_<%=i%>" size="15" maxlength="15" value="<%=txtbxCPID%>" class="redeemNum" onKeyPress="return checkEnter(event,'<%=LLBECOrderConstants.LLB_PAYDEVICE_COUPONFORM%>')"/> 
</div>

Answer 1

If you need to get an element by ID, and the ID has chars which jQuery could confuse for selector syntax ( ., :, etc), use the attr selector for ID instead:

$( '[id="' + inputID '"]' )