Question

i am validating the text box value on following conditions

1. It should be minimum of 3 characters

2. It should contain only alphabets

3. It should contain at least one vowel

If all the conditions get matches I am enabling the submit button.
If any of the above case are not matched I am setting an error message to div named error.

Here is my code

$document.ready(function(){

 $('.tbox').focus(); // cursor in text box 
 $(':submit').attr("disabled",true); // disable generate button

    $('.tbox').focus(fucntion(){

        check_the_input()   
    }); 


    });

function check_the_input()
{

    var value = $(this).val();

    $('.tbox').bind('keyup blur',function(){ 
    $(this).val( $(this).val().replace(/[^a-z]/g,'') ); }

    if(value.length > 3)
    {
        if(value.indexOf('a') == -1 && value.indexOf('e') == -1 && value.indexOf('i') == -1 && value.indexOf('o') == -1 && value.indexOf('u') == -1)
        {
            $('#error').text("*Input must contain atleast one vowel");
            $(':submit').attr("disabled",true); 

        }
        else
        {
            $(':submit').attr("disabled",false);
        }

    }
    else
    {
        $('#error').text("*Input should be atleast 3 characters")
        $(':submit').attr("disabled",true); 
    }


    setTimeout(check_the_input,100);
}

I am facing following issues here:

1. If I type input as aa99 the input changes to aa , but still the generated button is enabled.

2. I am not getting the error at the time I type the text. Only after pressing tab or clicking mouse outside the textbox I am getting error.

Answer 1

I would suggest rethinking the approach. Consider this simpler example:

HTML:

<form>
  <input type="text" id="myinput"/>
  <button id="submit" type="submit" disabled>Submit</button>
  <p class="error"></p>
</form>

jQuery:

By using a function test and an object to store your validation filters your code becomes more obvious, more elegant and you get better performance and it’s easier to maintain for example to add new filters or more inputs.

Demo: http://jsbin.com/ezatap/6/edit

var $input = $('#myinput');
var $error = $('.error');
var $submit = $('#submit');
var Filters = {
  min: {
    re: /.{3,}/,
    error: 'Must be at least 3 characters.'
  },
  char: {
    re: /^[a-z]+$/i,
    error: 'Must be only letters.'
  },
  vowel: {
    re: /[aeiou]/i,
    error: 'Must have at least one vowel.'
  }
};

function test(value, filters) {
  var isValid = false;
  for (var i in filters) {
    isValid = filters[i].re.test(value);
    $error.hide();
    $submit.prop('disabled', false);
    if (!isValid) {
      $error.show().text(filters[i].error);
      $submit.prop('disabled', true);
      break;
    }
  }
  return isValid;
}

test($input.val(), Filters);
$input.on('keyup blur', function() {
  test(this.value, Filters);
});