基本表格验证
[英]Basic form validation
问题描述
I am trying form validation in Javascript, but I am stuck on something. 
我正在尝试使用Javascript进行表单验证，但遇到了麻烦。
I have gotten the validation working, but cannot display the contents of each field in the textarea of the form at the bottom. 我已经完成验证工作，但是无法在底部窗体的textarea中显示每个字段的内容。
Any idea how I would do this? 知道我该怎么做吗？
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate() {
if( document.myForm.room.value == "" ) {
alert( "Please select a room option." );
return false;
}
if( document.myForm.activity.value == "" ) {
alert( "Please select an activity." );
return false;
}
if( document.myForm.hotelname.value == "-1" ) {
alert( "Please select a hotel name." );
return false;
}
if( document.myForm.name.value == "" ) {
alert( "Please provide your name." );
document.myForm.Name.focus() ;
return false;
}
// Use isNaN to check whether there is an illegal number
if( document.myForm.zip.value == "" ||
isNaN( document.myForm.zip.value ) ||
document.myForm.zip.value.length != 5 ) {
alert( "Please provide a zip code in 5 digit format." );
document.myForm.zip.focus() ;
return false;
}
return( true );
}
</script>
</head>
<body>
<form name="myForm" action="" onsubmit="return(validate());">
Type of room: <br />
<input type="radio" name="room" value="basic">Basic<br>
<input type="radio" name="room" value="luxury">Luxury
<br /><br />
Activity: <br />
<input type="checkbox" name="activity" value="swimming">Swimming<br>
<input type="checkbox" name="activity" value="fishing">Fishing
<br /><br />
Hotel name: <br />
<select name="hotelname" multiple="multiple">
<option value="-1" selected>Select...</option>
<option value="1">Hilton</option>
<option value="2">Hampton Inn</option>
<option value="3">Holiday Inn</option>
</select>
<br /><br />
Conferee's name:<input type="text" name="name">
<br /><br />
Conferee's zip code:<input type="text" name="zip">
<br /><br />
<input type="submit" value="Submit" />
<br /><br />
<textarea rows="10" cols="50"></textarea>
</form>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2013-11-19 16:53:23
// Use isNaN to check whether there is an illegal number
if( document.myForm.zip.value == "" ||
isNaN( document.myForm.zip.value ) ||
document.myForm.zip.value.length != 5 ) {
alert( "Please provide a zip code in 5 digit format." );
document.myForm.zip.focus() ;
return false;
}
// create the textarea content string
var fields_contents = "";
fields_content += "room : " + document.myForm.room.value + "\n";
fields_content += "activity : " + document.myForm.activity.value + "\n";
fields_content += "hotelname : " + document.myForm.hotelname.value + "\n";
fields_content += "name : " + document.myForm.name.value + "\n";
fields_content += "zip : " + document.myForm.zip.value + "\n";
//set the textarea content
document.getElementById('my_textarea').value = fields_content;
//and then return false for the form not to be submitted
return false;
Notice I use an id to find the textarea : you should add it in your html. 注意，我使用id来查找textarea：您应该将其添加到html中。 The \\n char is line break. \\n字符是换行符。
This version implies your form not to be submitted. 此版本表示您的表单无法提交。 The thing is that here we get inputs values directly by reading their value property. 问题是，这里我们通过读取value属性直接获得输入值。 If the form was submitted, the page would be refreshed, and the inputs values would be empty then. 如果提交了表单，将刷新页面，然后输入值将为空。 In this case, the solution would be to get the sent values with PHP, and then use these values directly in Javascript, like that : 在这种情况下，解决方案是使用PHP获取发送的值，然后直接在Javascript中使用这些值，如下所示：
var room_value_sent = '<?php echo $_REQUEST['room']; ?>';
fields_content += "room : " + room_value_sent + "\n";
The return false at the end is because of the need not to submit the form. 最后return false是因为不需要提交表格。 When you do something like onsubmit="return my_function();" 当您执行类似onsubmit="return my_function();" , if my_function returns false then the form is not submitted (= no page refresh and no request is done). ，如果my_function返回false ，则不提交表单（=不刷新页面且不完成请求）。
解决方案2
0 2013-11-19 16:53:25
Sorry for answering instead of commenting - repuration limitations. 很抱歉回答而不是发表评论-提纯限制。 You can try using Parsley.js library which provides clean code and works out of the box for almost any form you can imagine. 您可以尝试使用Parsley.js库，该库提供干净的代码，并且几乎可以以您能想到的任何形式直接使用。 Have a look here: 在这里看看：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.