CODEWITHSUNDEEP
javascriptjqueryformsvalidation
Jason
Jason

Reputation: 7682

Highlight Multiple Input ID's on javascript validation

using javascript validation and some jquery to show variable error messages in the DOM, and highlighting both the form label and field.

For this particular error message, I need to highlight 2 fields (email1 and email2). Unsure how to add it to my current setup for alerts below: 

customAlert ("email2",bnadd_msg_022);

simple question, how to I add email1 into the mix?

Edit:

Here is my jquery function:

function customAlert(inputID,msg){

      $("li").removeClass("alertRed");
      $("input").removeClass("CO_form_alert");  
      $("select").removeClass("CO_form_alert");   
      var div = $(".errorPopup");
      div.css({"display":"block"});
      $("#"+inputID).addClass("CO_form_alert").parent().addClass("alertRed");
      if (div.length == 0) {
        div = $("<div class='errorPopup' onclick='$(this).hide();'></div>");
        $("body").prepend(div);
      } 
      div.html(msg);
      $("#"+inputID).focus(function(){
        $(this).unbind('focus'); // remove this handler
        $('.errorPopup').hide(); // hide error popup
   });

So, In this case and on one other, I need to highlight 2 fields simultaneously

Upvotes: 0

Views: 562

Answers (2)

Anthony Grist
Anthony Grist

Reputation: 38345

I'd make use of the arguments 'array' in Javascript, and simply define customAlert as a function with no arguments.

function customAlert(){
    var args = arguments;
    if(args.length > 1) {
        // check that custom alert was called with at least two arguments
        var msg = args[0];
        $("li").removeClass("alertRed");
        $("input").removeClass("CO_form_alert");  
        $("select").removeClass("CO_form_alert");   
        var div = $(".errorPopup");
        div.css({"display":"block"});
        if (div.length == 0) {
            div = $("<div class='errorPopup' onclick='$(this).hide();'></div>");
            $("body").prepend(div);
        } 
        div.html(msg);
        for(var i = 1; i < args.length; i++) {
            var inputID = args[i];
           $("#"+inputID).addClass("CO_form_alert").parent().addClass("alertRed");
            $("#"+inputID).focus(function(){
                $(this).unbind('focus'); // remove this handler
                $('.errorPopup').hide(); // hide error popup
            });
        }
     }
}

Then you call it like so:

customAlert(bnadd_msg_022,"email2"); // note the order of the arguments has changed
customAlert(bnadd_msg_022,"email1","email2");

Upvotes: 1

picus
picus

Reputation: 1537

Without seeing the code, my guess is that you could change the customAlert function to take an optional third argument.

The way I would do it is make that third argument an array that can accept n number of field id's. In the customAlert function, I would check to see if the argument is passed, and if so loop through the array and highlight any id that is included therein.

Upvotes: 0

Related Questions