Highlighting Error Inputs

JavaScript
1

Hi all,

I’ve got another question concerning the form we discussed in a previous thread (kudos to Megazoid). That topic was getting pretty crowded, so I started a new one to talk about highlighting fields with error messages with a box shadow. Some of you have probably already done this with forms, but here’s what I’d like to accomplish:

-highlight input fields from which the error was generated
-remove the box shadow once the user interacts with each specific input that has an error

The PHP script I have that processes for validation and spam catching returns an array of errors (meaning there can be more than one error). I attempted to pass the array on to a separate function, highlightErrors, that is called by the function, testSecondResults(), after the validation is not passing. I am attempting to search through the array of errors with the .indexOf() method, but that isn’t catching the errors, and then displaying the box shadow on those inputs.

The following is what the current JS looks like:

function highlightErrors(errors) {
    if (errors.indexOf("E-mail") != -1) {
        $("input#confirmemail").addClass("errorfield");
    }
    
    if (errors.indexOf("name") != -1) {
        $("input#name").addClass("errorfield");
    }
    
    if (errors.indexOf("location") != -1) {
        $("input#country").addClass("errorfield");
    }
    
    if (errors.indexOf("Math") != -1) {
        $("input#addition").addClass("errorfield");
    }
}
  
  //this is the function called by the success value of the first .ajax() call
  function testFirstResults(response){
    if (response.indexOf("Submission Successful") != -1){
      $(".signupstep1").hide();
      $(".signupstep2").show('slow');
    } else if (response.indexOf("Invalid E-mail") != -1){
      $("p#invalidemail").slideDown(700).css("display", "table").delay(2000).slideUp(700);
    }
  }
  
  function testSecondResults(data){
    if (data['validation'] == "pass"){
        $(".joinlist p").text('');
        $(".signupstep2").hide();
        $(".signupstep3").show().delay(4000).slideUp(1200, function(){
            $(".signupstep1").slideDown(600, function(){
                $(".joinlist p").text("Join the Mailing List!");
            });
            $("#form1 input").prop("disabled", true);
        });
        $("#submit").val('Thanks!');
        var name = $("#name").val();
        var email = $("#confirmemail").val();
        $("#username").append(name);
        $("#emailaddr").append(email);
    } else {
        $("#errormessage").css("display", "table").slideDown(600);
        
        highlightErrors(data.errors);

        for (var i in data.errors){
            var li = $('<li></li>');
            li.html(data.errors[i]);
            $("ul#errormessage").append(li);
        }
    }
  }

After displaying the box shadow, I’ll also have to write an efficient way to remove (I was thinking of using the “this” operand, but I don’t know how yet).

This should add a nice touch of usability and make the site acutely interactive.

This is the test site. The form is at the bottom of the page.

Thanks,

Tyler

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.