简体   繁体   English

用javascript验证表单不会触发

[英]validate form with javascript doesn't get triggered

I have a form to change password, with javascript validate check for all the form fields, however, I don't think the Javascript even gets triggered. 我有一个更改密码的表单,使用javascript验证所有表单字段的检查,但是,我认为Javascript甚至不会触发。 Entering submit takes me straight to Null Pointer Exception error in my Controller. 输入Submit会使我直接进入Controller中的Null Pointer Exception错误。 Am I missing something ? 我想念什么吗?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Change Password Page</title>    
    <script type="text/javascript">
        function validate(){

            var username=document.form.j_username.value;
            var oldPassword=document.form.j_old_password.value;
            var newPassword=document.form.j_new_password.value;
            var confirmPassword=document.form.j_confirm_password.value;

            if(username==""){
             alert("Enter Username!");
              return false;
                }

            if(oldPassword==""){
             alert("Enter Old Password!");
              return false;
                }

            if(newPassword==""){
                 alert("Enter New Password!");
                  return false;
                }

            if(confirmPassword==""){
                 alert("Enter Confirm Password!");
                  return false;
                }

            return true;

        }       
    </script>
</head>

<body>
    <div class="change_password-header">
    <h1>Blah Blah</h1>
    </div>
    <div class="L" style="float: left; left; padding: 1em; background-color: #8eb4e3; border: 1px solid black;">
    <form action="changepassword" method="post" onsubmit="return validate()">
        <p><strong style="color: #e3f7ff">Username: </strong>
            &nbsp;<input type="text" name="j_username" size="25" />
        </p>

        <p><strong style="color: #e3f7ff">Old Password: </strong>
            &nbsp;<input type="password" size="25" name="j_old_password" />
        </p>

        <p><strong style="color: #e3f7ff">New Password: </strong>
            &nbsp;<input type="password" size="25" name="j_new_password" />
        </p>

        <p><strong style="color: #e3f7ff">Confirm New Password: </strong>
            &nbsp;<input type="password" size="25" name="j_confirm_password" />
        </p>

        <div style="text-align: center;">
            <input type="submit" value="Submit" class="button-login" style="background-color: #c7d9f1; border: 1px solid black;" />
            <input type="reset" value="Reset" class="button-login" style="background-color: #c7d9f1; border: 1px solid black;"/>
        </div>
    </form>
    </div>

    <div style="float: left; width: 100%; font-size: 12px; padding: 0 0 0 2em" class="change_password-footer">
        <div><a href = "login">Return back to login screen</a></div>
        <br/>
    </div>  
</body>
</html>

You just forgot to name your form: 您只是忘记命名您的表格了:

<form action="changepassword" name="test" method="post" onsubmit="return validate()">

and reference in JS like this: 并在JS中引用如下:

var username=document.forms.test.j_username.value;

http://jsfiddle.net/gq79y/ http://jsfiddle.net/gq79y/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM