CODEWITHSUNDEEP
javascriptjquery
Cherrie
Cherrie

Reputation: 1

Validation error message removal after successful validation without button click

I have a simple form, with four fields. My problem is form validation error messages are not getting removed even after giving valid input without any click event.

Below is the example where i used keypress event to get the solution, but as keycodes are different for keyboard and numeric keypad. Is there any other way to achieve the removal of error messages immediately after successful validation input without keypress event and without button click. Below is the example code I have tried for a single field phone number.

Below is the sample: http://jsfiddle.net/e203dLLL/

//Code to remove error msgs after giving valid input with keypress event.

$(".error").hide();
$(".validate").keypress(function(event) {

  var key = event.which || event.keyCode; //use event.which if it's truthy, and default to keyCode otherwise

  // Allow: backspace, delete, tab, and enter
  var controlKeys = [8, 9, 13];
  //for mozilla these are arrow keys
  if ($.browser.mozilla) controlKeys = controlKeys.concat([37, 38, 39, 40]);

  // Ctrl+ anything or one of the conttrolKeys is valid
  var isControlKey = event.ctrlKey || controlKeys.join(",").match(new RegExp(key));

  if (isControlKey) {
    return;
  }

  // stop current key press if it's not a number
  if (!(48 <= key && key <= 57)) {
    event.preventDefault();
    return;
  }
});

$('.validate').keyup(function() {

  var regex = new RegExp(/[^0-9]/g);
  var containsNonNumeric = this.value.match(regex);
  if (containsNonNumeric)
    $(".error").show();
  else $(".error").hide();
  //this.value = this.value.replace(regex, '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//Sample form with one field.
<form>
  Phone Number: <input type="text" name="firstname" class="validate">
  <div class="error"> Error! Only numericals allowed.</div>
</form>

Please give detailed solution for Name, email and password if any alternative other than keypress event and without button click.

Upvotes: 0

Views: 1752

Answers (1)

Rishab
Rishab

Reputation: 1532

you can use the $.focusout() event for handling in such scenario

for example: http://jsfiddle.net/v6ybua3j/

$(".error").hide();
$(".validate").keypress(function (event) {

        var key = event.which || event.keyCode; //use event.which if it's truthy, and default to keyCode otherwise

        // Allow: backspace, delete, tab, and enter
        var controlKeys = [8, 9, 13];
        //for mozilla these are arrow keys
        if ($.browser.mozilla) controlKeys = controlKeys.concat([37, 38, 39, 40]);

        // Ctrl+ anything or one of the conttrolKeys is valid
        var isControlKey = event.ctrlKey || controlKeys.join(",").match(new RegExp(key));

        if (isControlKey) {return;}

        // stop current key press if it's not a number
        if (!(48 <= key && key <= 57)) {
            event.preventDefault();
            return;
        }
    });

$('.validate').focusout(function () {

    var regex = new RegExp(/[^0-9]/g);
    var containsNonNumeric = this.value.match(regex);
    if (containsNonNumeric)
      $(".error").show();
    else $(".error").hide();
      //this.value = this.value.replace(regex, '');
});

Another solution is using setInterval()

Code: http://jsfiddle.net/axLg8oqt/

$(".error").hide();

setInterval(function(){
    var regex = new RegExp(/[^0-9]/g);
    var containsNonNumeric = $('.validate').val().match(regex);
    if (containsNonNumeric)
      $(".error").show();
    else $(".error").hide();
},300)

Upvotes: 1

Related Questions