驗證jQuery中的每個按鍵

Question

我正在嘗試編寫用於驗證輸入文本字段中輸入值的按鍵邏輯，但是我被困在如何啟動的過程中。一旦提交表單，下面的代碼將至少開始驗證。

我想先驗證表單然后再提交。 有人可以幫我嗎？

提前感謝這里的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>

演示： https : //jsfiddle.net/z4r3kx99/

Answer 1

像這樣使用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>

驗證jQuery中的每個按鍵

問題描述

1 個解決方案

解決方案1
0 2017-05-01 09:33:08

驗證jQuery中的每個按鍵

問題描述

1 個解決方案

解決方案1 0 2017-05-01 09:33:08

解決方案1
0 2017-05-01 09:33:08