0

It seems to be simple logic thing, but some how I cannot figure it out. I am behind this more than 2 hours and nothing seems to be working.. I am doing a form validation. On submit of the form, I check if the fields are empty or not. If empty, I add a class to the field so it becomes red in color and then create a new div and display a error message. I am having couple of issues with this. I am testing in IE8 and addClass is not working in that. Below is the code snippet

var first =  true;
if(first == true){
$('#submit_form .required').filter(':visible').each(function() {
    var input = $(this);
    if($(this).is(':empty')){
        $(this).css("border","1px solid #FF0004");
        //$(this).addClass("highlight");
        $(this).after('<div class="error_text">Required</div>');
        first = false;
        return false;
    }else{
        return true;
    }
});
}
else{
  $('#submit_form .required').filter(':visible').each(function() {
    var input = $(this);
    if($(this).is(':empty')){
        $(this).css("border","1px solid #FF0004");
        //$(this).addClass("highlight");
                  //I ned to remove the Required text here or else it will get added twice.
        $(this).after('');
                  //Add the text here
                    $(this).after('<div class="error_text">Required</div>');
        return false;
    }else{
        return true;
    }
});
}

So when the user clicks the submit button for first time first = true, it validates and which ever field is empty, it will display that red border and the text as well. This is working fine. Now when the user fills in some fields and again enter submit, there are some more mandatory fields that are not filled in. So now I want the filled fields to be remove the border and the Required text and then display red and Required for those that are empty now. I tried so many things and I am sick with this. Somehow I am not getting a right logic for this. Can some body out there help me in this? I don't want to use validate plugin.

Improve this question
3
  • 3
    why you write return = false; correct code is return false; or return true;...return = false; this line means you are assigning false value to return variable. Commented Oct 11, 2013 at 9:49
  • if there are errors return false; Commented Oct 11, 2013 at 9:55
  • genral note: since you cache the $(this) to the variable input why do you keep using $(this) ? Commented Oct 11, 2013 at 9:59

1 Answer 1

Reset to default
1

When present the <div> you want to remove is the next element after the one you're checking (the one this refers to), so you should be able to just do this to remove it:

$(this).next('div.error_text').remove();

As an aside, if you want to return a value from your function it should just be return true or return false, using the equals sign (=) is incorrect.

The first logic seems unnecessary, since jQuery is good at handling the case where elements don't exist. You could simplify your entire code down to this:

var returnValue = true;
$('#submit_form .required').filter(':visible').each(function () {
    var input = $(this);
    input.next('div.error_text').remove();
    input.removeClass('highlight');
    if (input.is(':empty')) {
        input.addClass('highlight');
        input.after('<div class="error_text">Required</div>');
        returnValue = false;
    }
});
return returnValue;

Then the following CSS for the highlight class:

.highlight {
    border: 1px solid #ff0004;
}

Note that in the above I've used a returnValue variable. That's because you have an anonymous function being passed to .each(), and calling return false inside that will only end execution of the loop, it won't prevent your form from being submitted.

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

oh yea..that was a typo..thanks for pointing out that. I have corrected it.
Hi Anthony.. yes..I think the above portion of the code posted by you will implement the full logic and submitting the form and checking for empty fields. and displaying the error message if the form is resubmitted also. Am I correct? Also a note..when I use addClass, it was not giving the border and color..I m using IE8
I tried input.addClass('highlight'); But that is nor giving border red. But if I use input.css("border","1px solid #FF0004"); it works..Is it the problem with IE8?
Even after using the above code, when I resubmit the form, the error text keeps on adding..It is not removing the div "Required"
@user1049057 I made a mistake, I was trying to select an element with class text_error but it should instead be error_text - edited the answer to fix that. Try making that change and then trying again?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.