CODEWITHSUNDEEP
javascriptjquery
RRP
RRP

Reputation: 2853

Form validation on keydown

I have the following semantic structure for a form

<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>

My objective is to perform validation on the specific input elements in the form on keydown. I have the following snippet of jQuery code that does that

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

I am trying to follow the event delegation technique. But the issue that i have run into and currently trying to figure out, is, how to focus on specific elements when keydown event is fired on the form element?

Based on the above code, once the keydown event is fired all the validations will be fired for the input elements instead of the specific one

Upvotes: 0

Views: 520

Answers (2)

Vijay Astound
Vijay Astound

Reputation: 75

$('#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;
    }
   }
  });

Upvotes: 1

nish yo
nish yo

Reputation: 59

$('#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>

Upvotes: 0

Related Questions