[英]Form Validation- html and javascript
我是编码表单验证方面的新手,无法使用formValidation函数使页面实际返回false(如果用户输入错误的isbn长度,则不提交表单)。 想知道我在这里想念的是什么。
无论isbn.length是什么,都会弹出警报并提交表单,但是,如果长度正确,它将被添加到数据库中并重新路由到主页。 如果长度不正确,则会路由到“此页面无法正常运行,localhost没有发送任何数据。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>
您可能需要像这样检查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;
}
}
然后根据需要添加逻辑。
您需要检查isbn
输入字段值的长度,并且在form标记中,您需要像这样在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>
您还有其他问题(请参阅Andre的答案 ),但需要将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.