停止提交操作

Question

我试图在用户名字段为空时停止提交操作，并在 div 中显示一些警告，ID 为 "err_msg"

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <h1>Register</h1>
      <form role="form" method="post">
        <div id="data-text">
          <input type="text" name="nick" placeholder="Nick" class="form-control" style="width: 250px;">
          <input type="text" name="name" placeholder="Imię" class="form-control" style="width: 250px;">
          <input type="text" name="surname" placeholder="Nazwisko" class="form-control" style="width: 250px;">
          <input type="text" name="email" placeholder="Email" class="form-control" style="width: 250px;">
          <input type="text" name="phone" placeholder="Telefon" class="form-control" style="width: 250px;">
          <input type="text" name="password" placeholder="Hasło" class="form-control" style="width: 250px;">
          <input type="text" name="repassword" placeholder="Powtórz hasło" class="form-control" style="width: 250px;">
        </div>
        <button type="submit" name='Proceed' value='register' class="btn btn-success">Zarejestruj</button>
      </form>
      <div id="err_msg"></div>
  </div>
</div>

问题是提交表单会刷新页面，并将每个元素重置为其默认值

是不是每个字段都用JS处理，然后用一个jQuery到post一个数据？我不喜欢可能矫枉过正的解决方案

Answer 1

您好 html 表单属性 onsubmit 在提交表单之前使用 java-脚本进行验证。请通过以下示例来解决您的问题。

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

这是为了在提交表单之前做任何您想做的事情。但是您也可以使用 html5 require 属性。

Answer 2

<script language="javascript">
  function validate(){
     noError = TRUE;
     var username = document.forms["myForm"]["fname"].value;
     if(username==''){
        noError = FALSE;
     }

     return noError;
  }
</script>

<form role="form" name="myForm" method="post" onsubmit="return validate()">
    <div id="data-text">
      <input type="text" name="nick" placeholder="Nick" class="form-control" style="width: 250px;">
      <input type="text" name="name" placeholder="Imię" class="form-control" style="width: 250px;">
      <input type="text" name="surname" placeholder="Nazwisko" class="form-control" style="width: 250px;">
      <input type="text" name="email" placeholder="Email" class="form-control" style="width: 250px;">
      <input type="text" name="phone" placeholder="Telefon" class="form-control" style="width: 250px;">
      <input type="text" name="password" placeholder="Hasło" class="form-control" style="width: 250px;">
      <input type="text" name="repassword" placeholder="Powtórz hasło" class="form-control" style="width: 250px;">
    </div>
    <button type="submit" name='Proceed' value='register' class="btn btn-success">Zarejestruj</button>
  </form>

Answer 3

检查昵称的代码示例：

 <!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <h1>Register</h1>
      <form id="myform" role="form" method="post">
        <div id="data-text">
          <input id="nick" type="text" name="nick" placeholder="Nick" class="form-control" style="width: 250px;">
      <input type="text" name="name" placeholder="Imię" class="form-control" style="width: 250px;">
      <input type="text" name="surname" placeholder="Nazwisko" class="form-control" style="width: 250px;">
      <input type="text" name="email" placeholder="Email" class="form-control" style="width: 250px;">
      <input type="text" name="phone" placeholder="Telefon" class="form-control" style="width: 250px;">
      <input type="text" name="password" placeholder="Hasło" class="form-control" style="width: 250px;">
      <input type="text" name="repassword" placeholder="Powtórz hasło" class="form-control" style="width: 250px;">
    </div>
    <button type="submit" name='Proceed' value='register' class="btn btn-success">Zarejestruj</button>
  </form>
  <div id="err_msg"></div>
  </div>
</div>

Javascript:

 $('#myform').on("submit", function() {
    if(!$("#nick").val()) {
         alert("Missing fields");
        return false;
    }

    return true;
});

但是，您仍然应该使用 $_POST 检查实际发送的值（如果您使用 php）

停止提交操作

Stop submit operation

html

php

forms

message

submit