基本表格验证

Question

我正在尝试使用Javascript进行表单验证，但遇到了麻烦。

我已经完成验证工作，但是无法在底部窗体的textarea中显示每个字段的内容。

知道我该怎么做吗？

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

Answer 1

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

注意，我使用id来查找textarea：您应该将其添加到html中。 \\n字符是换行符。

此版本表示您的表单无法提交。 问题是，这里我们通过读取value属性直接获得输入值。 如果提交了表单，将刷新页面，然后输入值将为空。 在这种情况下，解决方案是使用PHP获取发送的值，然后直接在Javascript中使用这些值，如下所示：

var room_value_sent = '<?php echo $_REQUEST['room']; ?>';
fields_content += "room : " + room_value_sent  + "\n";

最后return false是因为不需要提交表格。 当您执行类似onsubmit="return my_function();" ，如果my_function返回false ，则不提交表单（=不刷新页面且不完成请求）。

Answer 2

很抱歉回答而不是发表评论-提纯限制。 您可以尝试使用Parsley.js库，该库提供干净的代码，并且几乎可以以您能想到的任何形式直接使用。 在这里看看：

Parlsey.js

基本表格验证

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-11-19 16:53:23

解决方案2
0 2013-11-19 16:53:25

基本表格验证

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-11-19 16:53:23

解决方案2 0 2013-11-19 16:53:25

解决方案1
1 已采纳 2013-11-19 16:53:23

解决方案2
0 2013-11-19 16:53:25