Question

我正在尝试编写用于验证输入文本字段中输入值的按键逻辑，但我仍然坚持如何启动。以下代码在表单提交后开始验证至少

我想在提交之前验证表单。有谁可以帮助我？

提前完成这里是Jquery的代码：

<?php
class BookModel extends CI_Model {

    public function get_book($id){
        $this->load->database();
        $query = $this->db->query('SELECT book_id, book_title, book_publisher, book_summary FROM books WHERE author_id = $id');
            return $query->result();
        }
}
?>

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

Answer 1

像这样使用keypress()

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

＆＃13;

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

＆＃13;

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

＆＃13;

验证jquery中的每个按键

1 个答案: