validate on every keypress in jquery

Question

I'm trying to write the logic for keypress for verifying the enter value in the input text field, but I'm stuck in how to start.The below code starts validating atleast once the form has been submitted.

I want to validate the form prior Submitting itself. Could anyone help me?

Thanx in advance Here code for Jquery:

<script>
           $(document).ready(function(){

            $("#btn-submit").on("click",function(){
                $("#contact-form-id").submit();
            });   



            jQuery.validator.addMethod("lettersonly", function(value, element) {
                    return this.optional(element) || /^[a-zA-Z]+$/i.test(value);
            }, "Letters only please");   


            $("#contact-form-id").validate({

                    rules:{
                          username:{
                          required:true,
                          lettersonly: true

                  }
                 },
                    messages:{
                          username:{
                              required:'Please enter your name',
                              lettersonly:'Letters only mate'

                          }
                    }
                }); 



               //toshow the dialog box
            $("#alert-btn").click(function(){
                 $(".container").fadeIn('slow');
             }); 

               //to close the dialog box
               $(".container").on('click', function(event) {
                   if ($(event.target).is('#btn-cancel')) {
                       $(".container").fadeOut('slow');
                  }
               });


           });
        </script>

Demo : https://jsfiddle.net/z4r3kx99/

Answer 1

use like this keypress()

$('#input-text').keypress(function(){
//do stuff
})

 $(document).ready(function() { $("#btn-submit").on("click", function() { $("#contact-form-id").submit(); }); $('#input-text').keypress(function(){ //do stuff console.log('keypress') }) jQuery.validator.addMethod("lettersonly", function(value, element) { return this.optional(element) || /^[a-zA-Z]+$/i.test(value); }, "Letters only please"); $("#contact-form-id").validate({ rules: { username: { required: true, lettersonly: true } }, messages: { username: { required: 'Please enter your name', lettersonly: 'Letters only mate' } } }); //toshow the dialog box $("#alert-btn").click(function() { $(".container").fadeIn('slow'); }); //to close the dialog box $(".container").on('click', function(event) { if ($(event.target).is('#btn-cancel')) { $(".container").fadeOut('slow'); } }); });

 <title> Dialogue box </title> <link rel="stylesheet" href="contact.css"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <body> <button id="alert-btn">Alert message</button> <div class="container contact-form "> <form class="well form-horizontal" id="contact-form-id" name="contact-form-name"> <!--Write to Us--> <fieldset> <legend style="text-align:center">Write to Us</legend> <!--Name--> <div class="form-group"> <label class="col-sm-3 control-label">Name</label> <div class="input-group"> <span class="input-group-addon" id="basic-addon"><i class="glyphicon glyphicon-user"></i></span> <input type="text" class="form-control" id="input-text" value="" name="username" placeholder="Enter you name"> </div> </div> <!--Email id--> <div class="form-group"> <label class="col-sm-3 control-label">Email id</label> <div class="input-group"> <span class="input-group-addon" id="basic-addon"><i class="glyphicon glyphicon-envelope"></i></span> <input type="text" class="form-control" name="email" placeholder="Enter your mail"> </div> </div> <!--Message--> <div class="form-group"> <label class="col-sm-3 control-label">Message </label> <div class="input-group"> <span class="input-group-addon" id="basic-addon"><i class="glyphicon glyphicon-pencil"></i></span> <textarea class="form-control" name="message" placeholder="Provide ur message"></textarea> </div> </div> <div class="options"> <a href="#" id="btn-cancel">Cancel</a> <a href="#" id="btn-submit">Submit</a> <button value="Submit" id="btn-submit" class="button">Submit</button> </div> </fieldset> </form> </div> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> <script src=" http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script> <!-- <script src="validateForm.js"></script> --> <script> </script> </body>

validate on every keypress in jquery

Question

1 answers

solution1
0 2017-05-01 09:33:08

validate on every keypress in jquery

Question

1 answers

solution1 0 2017-05-01 09:33:08

solution1
0 2017-05-01 09:33:08