停止提交操作
问题描述：
我想阻止时的用户名字段为空提交操作，并显示在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发布数据？我不喜欢可能的矫枉过正解决方案
答
<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>
答
嗨有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属性。
答
实例与您的代码检查尼克：
<!-- 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）
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