基本表单验证答案

【问题标题】：Basic form validation基本表单验证
【发布时间】：2013-11-19 16:45:42
【问题描述】：

我正在尝试用 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>

【问题讨论】：

设置 textarea 内容应该很容易，使用类似 document.getElementById("mytextarea").innerHTML( yourcontent ) 的方法，在 textarea id="mytextarea" 上放置一个 id 属性。但是，如果您最终在某个无关紧要的地方实际提交了表单。
基本上不担心提交我只是在学习如何使用 JS 验证等。

标签： javascript validation

【解决方案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，则不会提交表单（= 不刷新页面且不完成请求）。

【讨论】：

我在 id="my_textarea" 的 textarea 中添加了一个 ID，然后将您的代码放在 head 的 script 标签中，但什么也没有。
将它添加到您自己的脚本末尾。之前注意不要return。我编辑我的答案更清楚。
好的，我知道有什么问题。您的表单已提交，因此页面已刷新。在这里，我的代码直接从输入中获取值。重新加载页面时，这些输入为空。这才是重点。您真的需要提交您的表格吗？如果是，您将不得不使用 php 来获取发送的值。
您不必提交表单以通过 onsubmit 进行验证吗？
是的。当您在提交处理程序中返回一个值时，如果返回值为 false，则不会提交表单：执行您的 javascript，但不会刷新页面。我刚刚编辑了我的答案。

【解决方案2】：

很抱歉回答而不是评论 - 重复限制。你可以尝试使用 Parsley.js 库，它提供了干净的代码，并且可以为几乎任何你能想象的形式开箱即用。看看这里：

Parlsey.js

【讨论】：