表单验证- html和javascript
表单验证- html和javascript
提问于 2018-09-05 08:01:48
我对编码比较陌生--在表单验证方面工作，我的formValidation函数不能让页面真正返回false (如果用户输入了不正确的isbn长度，就不能提交表单)。想知道我错过了什么。
无论isbn.length是什么，都会弹出警报并提交表单-但是，如果它的长度正确，它就会被添加到数据库中，并被重新路由到主页。如果长度不正确，它会被路由到"This page isn not working localhost not send any data. ERR_EMPTY_RESPONSE“。
Javascript：
//function to validate the form's ISBN number input and ensure it's between 10-14 digits.
function formValidation(){
var isbn = document.forms["sellForm"]["isbn"];
if (isbn.length >= 10 && isbn.length <= 14){
return true;
}
else
{
alert("Please input a 10-14 digit ISBN number");
isbn.focus();
return false;
}
}
</script>对应的HTML：
<form name="sellForm" method="POST" action="/create" role="form" onsubmit="formValidation()">
<div class="form-group">
<label for="role" >ISBN</label>
<input type="number" size=14 class="form-control" name="isbn" id="role" required
placeholder="input the 10-14 digit ISBN number"/>
</div>
<div class="form-group">
<label for="age">Condition</label>
<br>
<input type="radio" name="book_condition" value="Very Used"> Very Used<br>
<input type="radio" name="book_condition" value="Lightly Used"> Lightly Used<br>
<input type="radio" name="book_condition" value="Like New"> Like New
</div>
</div>
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" name="price" required
placeholder="input whole dollar price">
</div>
<button type="submit" class="btn btn-primary btn-md" id="add-btn">
<span class="fa fa-fire"></span> Sell</button>
</form>回答 3
Stack Overflow用户
回答已采纳
发布于 2018-09-05 08:20:06
您还存在其他问题(请参见Andre's answer)，但需要将return作为onsubmit属性的一部分进行添加
<form name="sellForm" method="POST" action="/create" role="form" onsubmit="return formValidation();">完整版
function formValidation() {
/*This is the form element*/
var isbnEl = document.forms["sellForm"]["isbn"];
var isbn = isbnEl.value;
/*The following 2 lines are for demonstration only and can be removed*/
console.log(isbnEl);
console.log(isbn);
if (isbn.length >= 10 && isbn.length <= 14) {
return true;
} else {
alert("Please input a 10-12 digit ISBN number");
isbnEl.focus();
return false;
}
}<form name="sellForm" method="POST" action="/create" role="form" onsubmit="return formValidation()">
<div class="form-group">
<label for="role">ISBN</label>
<input type="number" size=14 class="form-control" name="isbn" id="role" required placeholder="input the 10-14 digit ISBN number" />
</div>
<div class="form-group">
<label for="age">Condition</label>
<br>
<input type="radio" name="book_condition" value="Very Used"> Very Used<br>
<input type="radio" name="book_condition" value="Lightly Used"> Lightly Used<br>
<input type="radio" name="book_condition" value="Like New"> Like New
</div>
<!--</div> <---- This is an orphan tag, remove it -->
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" name="price" required placeholder="input whole dollar price">
</div>
<button type="submit" class="btn btn-primary btn-md" id="add-btn">
<span class="fa fa-fire"></span> Sell</button>
</form>
Stack Overflow用户
发布于 2018-09-05 08:15:23
您可能需要像这样检查isbn.value：
function formValidation(){
var isbn = document.forms["sellForm"]["isbn"];
if (isbn.value >= 10 && isbn.value <= 14) {
return true;
} else {
alert("Please input a 10-12 digit ISBN number");
isbn.focus();
return false;
}
}然后根据需要添加逻辑。
Stack Overflow用户
发布于 2018-09-05 08:22:27
您需要检查表单输入字段值的长度，并在isbn标记中获取onsubmit处理程序中的formValidation函数的返回值，如下所示：onsubmit="return formValidation()"。
function formValidation(){
var isbn = document.forms["sellForm"]["isbn"];
// check for the input field value's length
if (isbn.value.length >= 10 && isbn.value.length <= 14){
return true;
}
else
{
alert("Please input a 10-12 digit ISBN number");
isbn.focus();
return false;
}
}<form name="sellForm" method="POST" action="/create" role="form" onsubmit="return formValidation()">
<div class="form-group">
<label for="role" >ISBN</label>
<input type="number" size=14 class="form-control" name="isbn" id="role" required
placeholder="input the 10-14 digit ISBN number"/>
</div>
<div class="form-group">
<label for="age">Condition</label>
<br>
<input type="radio" name="book_condition" value="Very Used"> Very Used<br>
<input type="radio" name="book_condition" value="Lightly Used"> Lightly Used<br>
<input type="radio" name="book_condition" value="Like New"> Like New
</div>
</div>
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" name="price" required
placeholder="input whole dollar price">
</div>
<button type="submit" class="btn btn-primary btn-md" id="add-btn">
<span class="fa fa-fire"></span> Sell</button>
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52175373
复制相关文章
相似问题