Question

我正在使用MVC Data Anotation和jquery验证来验证我的表单。它在提交时效果很好，但是如果我在提交点击时写了一些代码，它就不会验证它。为什么这样？我哪里错了？我正在使用 jquery.validate.unobtrusive.min.js 和 jquery.validate.min.js

我没有收到任何错误。就我而言，如果我在提交点击时放了一些代码，jquery验证就会停止提交。

HTML：

<form action="/Login/ChangePassword" id="changePasswordForm" method="post">  <div id="changePasswordDiv" class="col-md-6">
  <div class="form-group">
    <label class="control-label col-lg-7" for="Current_password_:">Current password :</label>
    <div class="col-lg-5">
    <input MaxLength="8" class="form-control" data-val="true" data-val-required="Please enter current password." id="OldPassword" name="OldPassword" placeholder="Enter Your Current Password" type="password" value="" />
    <span class="field-validation-valid" data-valmsg-for="OldPassword" data-valmsg-replace="true" id="vOldPassword" style="color:red"></span>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-lg-7" for="New_password_:">New password :</label>
    <div class="col-lg-5">
    <input MaxLength="8" MinLength="4" class="form-control" data-val="true" data-val-required="Please enter new password." id="NewPassword" name="NewPassword" placeholder="Enter Your New Password" type="password" value="" />
    <span class="field-validation-valid" data-valmsg-for="NewPassword" data-valmsg-replace="true" id="vNewPassword" style="color:red"></span>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-lg-7" for="Confirm_password_:">Confirm password :</label>
    <div class="col-lg-5">
    <input MaxLength="8" MinLength="4" class="form-control" data-val="true" data-val-equalto="The new and confirm passwords should match." data-val-equalto-other="*.NewPassword" data-val-required="Please enter confirm password." id="ConfirmPassword" name="ConfirmPassword" placeholder="Confirm Password" type="password" value="" />
    <span class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true" id="vConfPass" style="color:red"></span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-7"></div>
    <div class="col-lg-5">
    <input type="submit" id="btnChangePassword" class="btn btn-default btn-primary" value="Save"/>
    </div>
  </div>
  <div class="form-actions col-right">
  </div>
  </div>
</form>

SCRIPT：

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/Custom/CustomValidation.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
  debugger;
  var validator = $('#changePasswordForm').validate({
    rules: {
    NewPassword: { IsNotEqualString: "#OldPassword" }
    },
    messages: {
    NewPassword: { IsNotEqualString: "New Passowrd can't same as Current Password." }
    }
  });
  });
</script>

CustomValidation.js

jQuery.validator.addMethod('IsNotEqualString', function (value, element, param) {  alert(param)
  return this.optional(element) || value.toLowerCase() != $(param).val().toLowerCase();
}, "");

Here is whole code if you want to check.

Answer 1

引用OP ：

＆＃34;我正在使用MVC Data Anotation和jquery验证来验证我的表单。它在提交时效果很好，但是如果我在提交点击时写了一些代码，它就不会验证它。为什么这样？我哪里错了？我正在使用jquery.validate.unobtrusive.min.js和jquery.validate.min.js＆＃34;

jQuery Validation插件会自动捕获提交按钮的单击，进行验证，显示错误，然后提交表单（如果有效）。通过在提交按钮中放置onclick处理程序，您会出错。您的onclick="return abc()"只是过度使用了jQuery Validation插件中内置的click处理程序。

＆＃34;我没有收到任何错误。就我而言，如果我在提交点击时放了一些代码，jquery验证就会停止提交。＆＃34;

当然，你没有收到错误。这是因为一切都按照您编程的方式运行。您的onclick="return abc()"取代了jQuery Validation插件。看起来您的abc()功能是手动验证。为什么要使用jQuery Validation插件来验证表单并编写自己的函数来验证表单？这毫无意义。

The plugin provides a method for writing your own rules。从提交按钮中删除onclick="return abc()"以使jQuery Validation插件正常运行。删除abc()函数并将其替换为jQuery Validation插件的自定义规则/方法。

使用jQuery，您再也不需要在HTML中使用事件处理程序了。事件只能在您的jQuery代码中处理。

$('#element').on('click', function() {
    // your code
});

这只是一个例子，因为在您的情况下，您根本不需要click处理函数。

Answer 2

我在中注释并在函数内注释。

在函数Javascript中使用Jquery加载Jquery库时出现第一个错误。您可以在谷歌上找到的site或Jquery
在function abc(){这句话之前错过了
```
 `$(document).ready(function () {`
```
在结束标记}

</script>

阅读site of jquery.validate.js这是对这些版本的测试：

1.6.4, 1.7.2, 1.8.3, 1.9.0（link）。

然后我建议使用此library of Jquery 1.9.0和Site

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

<script type="text/javascript">
     $(document).ready(function () {
    function abc() {
       // debugger;
        var validated = true;
        var password = $.trim($('#NewPassword').val());
        var oldPassword = $.trim($('#OldPassword').val());
        if (password == oldPassword) {
            $('#vNewPassword').text("New Password can't be same as Old Password.");
            validated = false;
        } else {

            //if password contains both lower and uppercase characters
            if (!password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
                validated = false;
            }
            //if it has numbers and characters, increase strength value
            if (!password.match(/([0-9])/)) {
                validated = false;
            }
            //if it has one special character
            //if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)){
            //    validated = false;
            //}
        }
        if (validated == false) {
            $('#vNewPassword').text('Password must contain at least one lower and upper case character and one number.');
            return false;
        } else {
            return true;
        }
    )};
 }
</script>

Jquery验证如果提交有一些代码，请不要提交

2 个答案: