JavaScript 验证 onChange 和 onSubmit 的问题

Question

我有一个任务，我应该在表单值更改时以及提交时验证表单。只要我引用来源，我就可以从互联网上获得这些功能本身。我的问题是它不起作用？我已经在浏览器中对其进行了测试，并且无论我提供多少乱码，都没有得到任何纠正。我以为我理解了这个概念，但它不起作用？这是我的代码：

<form name="usercomments" method="post" action="cgi-bin/form-mail2.pl" 
              onsubmit="return validateForm();"strong text>
            <table class="usercomments">
                <tbody>
                    <tr>
                        <td><label for="realname">Name:</label></td>
                        <td><input id="realname" align="left" size="50" name="realname"
                                   onchange="validateRealname(this, 'realnameguide');"></input></td>
                        <td id="realnameguide">Please use proper case when entering your name.</td>
                    </tr>
                    <tr>
                        <td><label for="email">Email:</label></td>
                        <td><input id="email" size="50" name="email" onchange="validateEmail(this, 'emailguide');"></input></td>
                        <td id="emailguide">Please use the format: ernest@craft.com</td>
                    </tr>

                    <tr>
                        <td><label for="message">Comments:</label></td>
                        <td><textarea id="message" name="message" rows="15" cols="50"
                                      onchange="return validateForm(this, 'commentsguide');"></textarea></td>
                        <td id="commentsguide">Please provide your comments regarding the website
                            in the space provided below.</td>
                    </tr>
                    <tr>
                        <td><label for="rating">How would you rate this website?</label></td>
                        <td>
                            <p>&nbsp;1=Fantastic!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                                &nbsp;&nbsp;2=It's Good!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;3=It's Average.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
                                &nbsp;&nbsp;4=It's Bad.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;5=It's Terrible!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                            <p style="word-spacing: 2.5em">
                                <input type="radio" value="1" name="rating"></input> 1
                                <input type="radio" value="2" name="rating"></input> 2
                                <input type="radio" value="3" name="rating"></input> 3
                                <input type="radio" value="4" name="rating"></input> 4
                                <input type="radio" value="5" name="rating"></input> 5
                            </p>
                        </td>
                    </tr> 
                    <tr>
                        <td><label for="phone"> Phone Number:</label></td>
                        <td><input type="tel" name="phonenumber" id="phonenumber" onchange="return validatePhone(this, 'phoneinfo');">
                            </input></td>
                        <td id="phoneinfo">999-999-9999</td>
                    </tr>
                    <tr>
                        <td><label for="bday">Birthday:</label> </td>
                        <td><input id="bday" name="bday" onchange="return validateBday(this, 'bdayguide');"></input></td>
                        <td id="bdayguide">07/17/2014</td></tr>
                    <tr>
                        <td><input type="submit" value="Submit"></input></td>
                    </tr>
                </tbody>
            </table>
        </form>

Answer 1

看起来你目前只完成了一半的任务。你需要编写你有参考的javascript函数，例如validateRealname。

您应该在单独的 javascript 文件中执行此操作，并使用 <script> 标记将其导入。

您还需要从以下位置更改单选按钮：

<input type="radio" value="1" name="rating"></input> 1

到：

<input type="radio" value="1" name="rating">1</input>

一旦你编写了这些函数并导入了它们，你就可以开始了。