在提交表单上调用 javascript 函数答案

【问题标题】：Call javascript function on submit form在提交表单上调用 javascript 函数
【发布时间】：2014-01-21 10:30:26
【问题描述】：

我在提交表单时尝试调用 JavaScript 函数。

这是代码，但在提交函数未调用时，请提出一些建议，我也想使用 javascript 方法显示错误消息，如何在使用 JavaScript 的验证中显示错误消息。

<form id="register" name="register"  onsubmit="validateForm()">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>

<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>

</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#register").validate({
        rules: {
            "Username": {
                required: true,
            },
            "Password": {
                required: true,
                minlength: 5
            },
            "Confirm-Password": {
                required: true,
            },
            "email": {
                required: true,
            }
        }
    });
});
</script>

这里是 JavaScript 代码

function validateForm()
{
    var password = document.forms["register"]["Password"].value;
    var con-password = document.forms["register"]["Confirm-Password"].value;
    if(password != con-password)
    {
        document.getElementById('password-error').style.visibility='visible';
        alert("not matched");
    }
    alert("matched");
}

【问题讨论】：

onsubmit="validateForm()" 替换为 onsubmit="return validateForm()"。试试这个
@kruti 我已经试过不工作了。
任何人都可以像在 jsfiddle 上一样分享工作代码

标签： javascript jquery validation jquery-validate

【解决方案1】：

这可能是由于您的脚本中存在语法错误。当您看到此类错误时，请查看浏览器的 JavaScript 控制台。

在这种情况下，con-password 不是有效的变量名。 JavaScript 看到的是：

var con - password ...

即代码显示“从con 中减去password”。尝试使用下划线：

var con_password ...

【讨论】：

感谢学习了一个新东西，添加了但仍然没有起作用。
事件 returnValue 已弃用。请改用标准 event.preventDefault()。
-1 因为没有向 OP 显示他的 validateForm() 函数是完全多余的，并且 jQuery Validate 插件内置了 submitHandler。

【解决方案2】：

密码匹配不需要做任何额外的事情，只需添加equalTo: "#Password"即可，如下例所示：

$(document).ready(function () {
    $("#register").validate({
        rules: {
            "Username": {
                required: true,
            },
            "Password": {
                required: true,
                minlength: 5
            },
            "Confirm-Password": {
                required: true,
                equalTo: "#Password"
            },
            "email": {
                required: true,
            }
        },
       messages: {
         Password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                    },
         Confirm-Password: {
                    required: "Please provide a confirm password",
                    equalTo: "Please enter the same password as above"
                    }
        },
        submitHandler: function(form) { 
            // Your function call  
            return false; // return true will submit form
            }
    });
});

工作示例：

<form id="register" name="register" action="" method="post">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm_Password" name="Confirm_Password" placeholder="Confirm Password" ><br><br>

<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>

</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#register").validate({
        rules: {
            "Username": {
                required: true,
            },
            "Password": {
                required: true,
                minlength: 5
            },
            "Confirm_Password": {
                required: true,
                equalTo: "#Password"
            },
            "email": {
                required: true,
            }
        },
       messages: {
         Password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                    },
         Confirm_Password: {
                    required: "Please provide a confirm password",
                    equalTo: "Please enter the same password as above"
                    }
        },
        submitHandler: function(form) { 
            // Your function call  
            return false; // return true will submit form
            }
    });
});
</script>

【讨论】：

感谢它对我有用，但我也想使用 javascript。
据我所知 jQuery 是 JS ;)
你可以使用 submitHandler: function(form) { /*你的函数调用*/ return false; }
@Anubhav 上面的技巧对我有用，但是当密码不同和相同时，它会在两种情况下显示错误消息。
不可能，你做错了什么。请参阅文档jqueryvalidation.org/validate。注意输入字段名称中的连字符（-）改为下划线（_）！

【解决方案3】：

也许您可以在验证中添加新规则而不是检查密码是否匹配？类似：

           ... "Password": {
            required: true,
            minlength: 5
        },
        "Confirm-Password": {
            required: true,
            equalTo: "#Password"} ....

对于消息添加：

... messages: {
           "Password": "Your message",

        }...

总之是这样的：`

$(document).ready(function () {
$("Your form name").validate({
    rules: {
        "Username": {
            required: true,
        },
        "Password": {
            required: true,
            minlength: 5
        },
        "Confirm-Password": {
            required: true,
            equalTo: "#Password"
        },
        "email": {
            required: true,
            email: true
        }
    }
        messages: {
            "Password": "Your message",
            "email": "Your Message",
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});`

【讨论】：

谢谢你能写下密码和电子邮件的消息部分，只是为了确认语法。
添加了一些。但是我可能有一些拼写错误。目前无法检查。

【解决方案4】：

试试这个。我在提交按钮上添加了onclick事件来调用函数validateForm()

html

<form id="register" name="register">
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>

<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" onclick="validateForm()">Submit</button>

</form>

这是validateForm()

<script type="text/javascript">
    function validateForm() {
        var username = $('#Username'),
            password = $('#Password'),
            confirm  = $('#Confirm-Password'),
            email    = $('#email');

        $('#register').submit(function(ev){
            // check if all fields is not empty
            if(username.val() === '' || password.val() === '' || confirm.val() === '' || email.val() === '') {
                ev.preventDefault(); // prevent form submit
                alert('All fields are required.'); //alert message
                //check if password and confirm password is equal
            } else if(password.val() != confirm.val()){
                ev.preventDefault(); // prevent form submit
                alert('password did not match.'); //alert message
            } else {
                return true; // submit form if validation has passed.
            }
        });
    }
</script>

【讨论】：

【解决方案5】：

可能你错过了——你需要在

中使用method="post"

http://jsfiddle.net/dLbLS/

    <form id="register" name="register"  method="post" onsubmit="validateForm();" >
    <label for ="Username"> Username </label><br>
  <input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
  <label for ="Password"> Password </label><br>
 <input type="password" class="register-control" id="Password" name="Password"  placeholder="Enter Password" ><br><br>
  <label for ="Confirm-Password"> Confirm Password </label><br>
  <input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>

  <label for="email" > Email </label><br>
  <input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
 <button type="submit" >Submit</button>

 </form>

【讨论】：

【解决方案6】：

使用此代码

    <input type="button" id="close" value="Submit" onClick="window.location = 'validateForm()'">

做一件事，我发送一个链接

How to do validation in JQuery dialog box?

如果此答案正确，请将其标记为其他人的答案....

【讨论】：