validiere auf jedem Tastendruck in jquery

Ich versuche, die Logik für den Tastendruck für die Überprüfung der Eingabe Wert in das Eingabe-Textfeld zu schreiben, aber ich bin fest, wie zu starten. Der untenstehende Code beginnt zu validieren, sobald das Formular hat eingereicht worden.validiere auf jedem Tastendruck in jquery

Ich möchte das Formular vor dem Einreichen selbst validieren. Könnte mir jemand helfen?

Thanx im Voraus Hier Code für 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/

Quelle

2017-05-01 Vijay Vj

Verwendung wie diese 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>

Quelle

2017-05-01 09:33:08 prasanth

validiere auf jedem Tastendruck in jquery

Antwort

Verwandte Themen