Question

I am using jQuery to validate some fields in a form, and seem to be having an issue with one field in particular (#inputTel).

If an incorrect format is entered, an error message pops up underneath, which is fine, but the problem is once the correct format is entered the message does not disappear.

Here’s a jsFiddle with the complete demo.

This is the section in question:

//Tel Validate
function is_valid_tel() {
    $this = $("#inputTel");
    var pattern = new RegExp("^\d{11}$");
    if (pattern.test($this.val())) { // valid
        if ($this.closest(".control-group").hasClass("error")) $this.closest(".control-group").removeClass("error");
        $this.siblings(".help-inline").css("display", "none");
        return true;
    } else { // error
        if (!$this.closest(".control-group").hasClass("error")) $this.closest(".control-group").addClass("error");
        $this.siblings(".help-inline").css("display", "block");
        return false;
    }
}

Every other field works as expected except this one. My jQuery skills are limited so I’m unsure of how to solve this.

Answer 1

Problem in your code:

Replace var pattern = new RegExp("^\d{11}$"); with var pattern = new RegExp(/^\d{11}$/);

Updated code

//Tel Validate
function is_valid_tel() {
    $this = $("#inputTel");
    var pattern = new RegExp(/^\d{11}$/);// Update this line
    if (pattern.test($this.val())) { // valid
        if ($this.closest(".control-group").hasClass("error")) $this.closest(".control-group").removeClass("error");
        $this.siblings(".help-inline").css("display", "none");
        return true;
    } else { // error
        if (!$this.closest(".control-group").hasClass("error")) $this.closest(".control-group").addClass("error");
        $this.siblings(".help-inline").css("display", "block");
        return false;
    }
}

Check the fiddle http://jsfiddle.net/rfg8H/