Форма проверки на KeyDown

Question

У меня есть следующий семантическую структуру для формы

<form class="form-horizontal" name="signUp" id="signUp" novalidate> 
    <fieldset> 
     <legend>Sign Up</legend> 
     <div class="form-group inputEmail"> 
      <label for="inputUsername" class="col-lg-2 control-label" >Username</label> 
      <div class="col-lg-10"> 
       <input type='email' class="form-control" id="inputEmail" placeholder="Your Email" maxlength="56" /> 
      </div> 
     </div> 
     <div class="form-group inputPassword"> 
      <label for="inputPassword" class="col-lg-2 control-label" >Password</label> 
      <div class="col-lg-10"> 
       <input type='password' class="form-control" id="inputPassword" placeholder="Your Password" minlength="6" /> 
      </div> 
     </div> 
    </fieldset> 
</form> 

Моя цель состоит в том, чтобы выполнить проверку на конкретных входных элементов в форме на KeyDown. У меня есть следующий фрагмент кода jQuery, который делает это

$('#signUp').keydown(function(){ 
    signUp.usernameValid(); //performs validation 
    signUp.passwordValidity(); //performs validation 
}); 

Я стараюсь следовать технике делегирования событий. Но проблема, с которой я столкнулся и в настоящее время пытается понять, заключается в том, как сосредоточиться на определенных элементах, когда событие keydown запускается в элементе формы?

На основании приведенного выше кода, после того, как KeyDown событие вызывается все валидация будет срабатывать для входных элементов вместо конкретного одного

Answer 1

$('#signUp input').on('keydown', function(){ 
 
    //this will give you the specific element 
 
    console.log($(this)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form class="form-horizontal" name="signUp" id="signUp" novalidate> 
 
         <fieldset> 
 
          <legend>Sign Up</legend> 
 
          <div class="form-group inputEmail"> 
 
           <label for="inputUsername" class="col-lg-2 control-label" >Username</label> 
 
           <div class="col-lg-10"> 
 
            <input type='email' class="form-control" id="inputEmail" placeholder="Your Email" maxlength="56" /> 
 
           </div> 
 
          </div> 
 
          <div class="form-group inputPassword"> 
 
           <label for="inputPassword" class="col-lg-2 control-label" >Password</label> 
 
           <div class="col-lg-10"> 
 
            <input type='password' class="form-control" id="inputPassword" placeholder="Your Password" minlength="6" /> 
 
           </div> 
 
          </div> 
 
         </fieldset> 
 
        </form>

Answer 2

$('#inputEmail').keydown(function (e) { 
    if (e.ctrlKey || e.altKey) { 
    //e.preventDefault(); 
    $("#errg").html("Allow only alphabets").show().fadeOut("slow"); 
       return false; 
    } else { 
    var key = e.keyCode; 
    if (!((key == 8) ||(key == 9) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) { 
    $("#errg").html("Allow only alphabets").show().fadeOut("slow"); 
       return false; 
    } 
    } 
    });