表单验证event.preventdefault无法正常工作

时间:2017-07-03 21:17:17

标签: javascript jquery

我是Javascript&的新手jQuery的。我目前正在进行大学项目,我有一个用于新密码更改的表单输入控件,如果用户没有输入任何内容,我想避免提交表单。我不确定我是否已经很好地链接了该方法,或者是否匹配来自两个输入字段的值是正确的。 我知道有一个验证插件,但我想在此之前尝试解决问题。

任何帮助或建议都将不胜感激

这是代码

<form id="accmanager" name="accmanager" action="view-acc.php" method="POST">
    <h1>Account Management</h1>
    <p>
      <ul type="none">
        <li><input type="radio" name="optaccmanager" checked="checked" id="viewaccinfo" /> View Account Information</li>
        <li><input type="radio" name="optaccmanager" id="addacc" /> Add Account</li>
        <li><input type="radio" name="optaccmanager" id="tochangepass" /> Change Password
         <ul id="changepass" type="none" style="display: none">
            <li><input type="text" name="newpassword" id="newpassword" size="23" title="Enter new password" /></li>
            <li><input type="text" name="confirmpassword" id="confirmpassword" size="23" title="Re-type new password" /></li>
        </ul>
        </li>
    </ul>
    <input id="submitbtn" type="submit" value="View Account" style="display: inline-block;position: absolute;left: 5em;top:20em;" />
</form>

和脚本代码

<script>
    //form validation section
    $(document).ready(function(){
        var changepass = $("#changepass"),
            addacc = $("#addacc"),
            viewaccinfo = $("#viewaccinfo"),
            tochangepass = $("#tochangepass");

            addacc.on("click",function(event){
              changepass.css("display","none");
              $("#submitbtn").attr("value","Add Account");
            });

            viewaccinfo.on("click",function(event){
                changepass.css("display","none");
                $("#submitbtn").attr("value","View Account");
            });

            tochangepass.on("click",function(event){
                changepass.css("display","inline");
                $("#submitbtn").attr("value","Change Password");    
            });

            $("form").submit(function(event){
                var newpassword = $("#newpassword"),
                    confirmpassword = $("#confirmpassword");

                if ((newpassword.val == null) || (confirmpassword.val == null)) {
                    event.preventDefault;
                    newpassword.attr("title","Please enter new password");
                }
            });
   });

2 个答案:

答案 0 :(得分:1)

尝试改变这一点:

if ((newpassword.val == null) || (confirmpassword.val == null)) {
   event.preventDefault;
   newpassword.attr("title","Please enter new password");
}

要:

if ((newpassword.val().length == 0) || (confirmpassword.val().length == 0)){
   event.preventDefault();
   newpassword.attr("title","Please enter new password");
   return false;
}

答案 1 :(得分:1)

感谢大家的帮助,我通过更改if块表达式来排序错误。

从之前的代码:

$("form").submit(function(event){
            var newpassword = $("#newpassword"),
                confirmpassword = $("#confirmpassword");

            if ((newpassword.val == null) || (confirmpassword.val == null)) {
                event.preventDefault;
                newpassword.attr("title","Please enter new password");
            }
        });

新代码:

$("form").submit(function(event){
if ($("#tochangepass").is(":checked")){
   if (  ($("#newpassword").val().length == 0) || ($("#confirmpassword").val().length == 0)  ) {
        event.preventDefault();
        newpassword.attr("title","Please enter new password");
    }
    else  {
        return true;
    }
}

}