Question

首先，我对这段代码令人作呕的道歉表示道歉，到目前为止，我的选择并不是我的选择，因为我的老板的命令和我团队中的其他人之前从未做过任何事情。真的不容错过项目的开始！

基本上我想在通过提交按钮进入下一页之前验证几个输入。没有使用的表单，所以我尝试使用onClick提交按钮来启动验证功能。任何人都可以看到下面的代码有什么问题（除了它是非常糟糕的，从让它按照需要工作的角度来看。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- #include file="includes/header.asp" -->
<Center>

<tr>
<td width="100%" height="300" align="center">


    <table width="100%" id="table01">

        <Tr>
            <Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
                <font class="table_header">Password Reset</font>
            </td>
        </tr>
        <tr>
        <Td align="center" height="150" valign="middle">
                <font class="table_grey">
                    Please select one of the methods below to reset your password.
                    <br><br>
                    <form name="radioq"align="center">
                        <input type="radio" name="levels" value="level1" onClick="get_radio_value(1);"/> E-mail a new password<br />
                        <input type="radio" name="levels" value="level2" onClick="get_radio_value(2);"/> Answer secret question<br/>
                    </form>
                        <!-- Javascript to handle which table loads below based on radio selection -->                   
                </font> 
        </td>           
    </tr>

</table>

<table width="100%" class="table01" id="level1" style="display:none;">

        <Tr>
            <Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
                <font class="table_header">E-mail Address</font>
            </td>
        </tr>
        <tr>
        <Td align="center" height="150" valign="middle">
                <font class="table_grey">
                    Please enter your e-mail address and surname.
                    <br/><br/>


                        <font class="table_grey">E-mail Address:&nbsp;</font>

                        <input id="emailinput" size="20" type="text" value="" name="emailinput" />
                        <br/><br/>
                        <font class="table_grey">Surname:&nbsp;</font>

                        <input id="surnameinput" size="20" type="text" value="" name="surnameinput" />
                        <!-- Javascript to handle incorrect surname/email -->                    
                </font>

        </td>
    </tr>

    <tr>                                
        <td align="right">
            <a style="text-decoration:none;"href="password_email_success.asp"><button class="smallbutton" onClick="return validatemail();" type="submit" value="Login" name="submit" class="submit" /><span>Next</span></button></a>
        </td>
    </tr>   
</table>

<table width="100%" class="table01" id="level2" style="display:none;">

        <Tr>
            <Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
                <font class="table_header">Secret Question</font>
            </td>
        </tr>
        <tr>
        <Td align="center" height="150" valign="middle">
                <font class="table_grey">
                    Please answer your secret question below.
                    <br/><br/>


                        <font class="table_grey">What is your mother's maiden name?&nbsp;</font>

                        <br/><br/>
                        <font class="table_grey">Answer:&nbsp;</font>

                        <input id="answerinput" size="20" type="text" value="" name="answerinput" />
                        <!-- Javascript to handle incorrect surname/email -->                    
                </font>

        </td>
    </tr>

    <tr>                                
        <td align="right">
            <a style="text-decoration:none;"href="password_change_success.asp"><button class="smallbutton"  type="submit" value="Login" name="submit" class="submit" /><span>Next</span></button></a>
        </td>
    </tr>   
</table>

<br><br>

<!-- #include file="includes/footer.asp" -->

<script language="Javascript">

function get_radio_value(val)

{

val = val - 1;

for (var i=0; i < document.radioq.levels.length; i++){

      if(i==val){

        document.radioq.levels[i].checked = true;

       }

}

for (var i=0; i < document.radioq.levels.length; i++){

   if (document.radioq.levels[i].checked)

      {

          var rad_val = document.radioq.levels[i].value;

          document.getElementById(rad_val).style.display = "table";

      }

   else{

    var rad_val = document.radioq.levels[i].value;

    document.getElementById(rad_val).style.display = "none";

   }

}

}

function validatemail()
        {
            if ( !isNaN(document.level1.surnameinput.value)  )
            {
                alert("Please enter a valid lastname - text only");
                document.level1.surnameinput.focus();
                return false;
            }
            if ((document.level1.emailinput.value == "") )
            {
                alert("Please enter an email.");
                document.level1.emailinput.focus();
                return false;
            }

            return true;
        }

Answer 1

在表单validatemail()活动中调用您的onSubmit功能，而不是按下onClick个按钮之一。这被认为是最佳实践，因为即使使用 ENTER 键以及所有相关的提交按钮提交表单，它也会运行验证功能。

<form onSubmit="return validatemail();">

重新提交您的提交按钮don´t name it "submit"，并且不要在同一元素上多次使用class或任何其他属性。

<button type="submit" name="submitButton" value="Login" class="smallbutton" />

此外，所有表单元素（input，button等）都应放在<form></form>标记内。

Javascript onClick验证没有触发

1 个答案: