JavaScript验证onChange和onSubmit的问题

时间:2014-07-20 22:22:58

标签: javascript html validation onchange onsubmit

我有一个作业,我应该在表单的值更改时以及在提交时验证表单。如果我引用来源,我可以从互联网上获取这些功能。我的问题是它无法正常工作?我已经在浏览器中对它进行了测试,并且没有得到任何纠正,无论我提供多少胡言乱语。我以为我理解了这个概念,但它只是不起作用?这是我的代码:

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

1 个答案:

答案 0 :(得分:0)

看起来你现在只完成了一半的任务。您需要编写您参考的javascript函数,例如validateRealname

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

您还需要更改单选按钮:

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

为:

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

一旦你编写了这些功能并导入它们,你就应该好好去。