Question

以下是我使用HTML和Bootstrap

创建的表单

<div class="col-sm-7 slideanim">
  <form id="frm-post-comment" name="frm-post-comment" method="post" action="#">
    <input type="hidden" name="the-comment" value="true">
    <div class="row">
      <div class="col-sm-6 form-group">
        <input class="form-control" name="name" placeholder="Name" type="text">
      </div>
      <div class="col-sm-6 form-group">
        <input class="form-control" name="email" placeholder="Email" type="email">
      </div>
    </div>
    <textarea class="form-control" name="comments" placeholder="Comment" rows="5"></textarea>
    <br>
    <div class="row">
      <div class="col-sm-12 form-group">
        <button id="comment-post" class="btn btn-info pull-right" type="submit">Send</button>
      </div>
    </div>
  </form>
</div>

然后，我想使用JQuery验证表单输入，这是验证代码

$(document).ready(function() {
  $("#comment-post").click(function() {
    submitComment();
    $("#comment-pst-alert").show();
    $("html,body").animate({
      scrollTop: 0
    }, "slow");
  });
});

function submitComment() {
  var msg = "";
  var name = $("#name").val();
  var email = $("#email").val();
  var comments = $("#comments").val();
  var re = /^[A-Za-z]+$/;

  if (name == "" || name.length < 3) {
    msg += "*Please enter a valid name,it must be longer than three characters.<br>";
  }

  if (!re.test(name)) {
    msg += "*Please enter a valid name,it must not contain numbers.";
  }

  var chkEmail = /^[a-z0-9._%-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

  if (email == "") {
    msg += "<br>*Please enter an email address.";
  }

  if (email.length < 8) {
    msg += "<br>*Email address cannot be less than 8 characters";
  }

  if (email.search('@') == -1) {
    msg += "<br>*Email must have a @,please enter a valid email address.";
  }

  if (comments == "") {
    msg += "<br>*Please enter a comment.";
  }

  if (comments.length > 70) {
    msg += "<br>*The comment can not exceed 70 characters";
  }

  if (msg != "") {
    $("#comment-pst-alert").addClass("alert-danger");
    $("#comment-pst-alert").children("strong").text("Warning");
    $("#comment-pst-alert").children("p").html(msg);
  } 
  else {
    $("#name").val("");
    $("#email").val("");
    $("#comments").val("");

    var closeAlert = $("<a/>", {
      "class": "close",
      "data-dismiss": "alert",
      "text": "x"
    });

    $("#comment-pst-alert strong").before(closeAlert);
    $("#comment-pst-alert").removeClass("alert-danger");
    $("#comment-pst-alert").addClass("alert-success");
    $("#comment-pst-alert").children("strong").text("Success");
    msg += "<br>You have successfully submitted your details, you will      here from us within 24 hours.";
    $("#comment-pst-alert").children("p").html(msg);
  }

  $("#comment-pst-alert").show();
}

我的bootstrap alert control最初是使用CSS隐藏的。如果用户输入中存在错误，则会显示警报控件并向其添加relevant class。如果没有错误，我想删除以前的类并向警报控件添加success class，然后我想提交输入并使用{{将数据添加到数据库中1}}。

PHP

我在控制台上或在PHP 上没有错误，表单提交但没有执行$connection = mysql_connect('localhost', 'root', 'root'); if ($connection) { if ($_POST["name"] != "" || $_POST["email"] != "" || $_POST["comments"] != "") { mysql_select_db("smart_hustle_comments") or die("could not select table ".mysql_error()); $name = $_POST["name"]; $email = $_POST["email"]; $comment = $_POST["comments"]; $sql = "INSERT INTO user_comments VALUES('$name','$email','$comment')"; $query = mysql_query($sql); } }验证，请帮忙。

Answer 1

您的jquery验证被跳过，因为您同时提交表单并进行验证。在成功验证后，使用button申请表单，将您的按钮类型更改为submit，而不是$('#frm-post-comment').submit();。

在使用PHP发布之前，我需要使用JQuery验证表单数据

1 个答案: