Question

我试图在用户名字段为空时停止提交操作，并在div中显示一些警告，其中包含id＆＃34; err_msg＆＃34;

<!-- 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发布数据吗？我不喜欢可能的过度杀伤解决方案

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

检查nick的代码示例：

 <!-- 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）检查实际发送的值

停止提交操作

3 个答案: