停止提交操作

我想阻止時的用戶名字段爲空提交操作，並顯示在ID爲「ERR_MSG」的div一定的警示作用停止提交操作

<!-- 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發佈數據？我不喜歡可能的矯枉過正解決方案

來源

2015-02-24 Bartłomiej Sobieszek

JavaScript是這裏的答案。 – 2015-02-24 09:57:22

您需要javascript和/或'$ _POST'值才能填寫默認值（如果存在）。或者'需要'，見下文。 – jeroen 2015-02-24 09:58:08

你可以使用javasript，如果使用html5，你可以使用require屬性。 – lmarcelocc 2015-02-24 09:58:28

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

來源

2015-02-24 10:03:37

嗨有html窗體屬性onsubmit要驗證使用java-script之前表單提交。請通過以下示例來解決您的問題。

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

這是做表單提交前你想做的任何事情。但是您也可以使用html5require屬性。

來源

2015-02-24 10:01:53 AkshayP

實例與您的代碼檢查尼克：

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

來源

2015-02-24 10:06:20

停止提交操作

回答

相關問題