如果提交有一些代码，则jQuery验证不适用于提交 [英] Jquery Validation Don't work on Submit if Submit has some Code

问题描述

我正在使用带有jquery验证的MVC数据注释来验证我的表单.它在提交时效果很好，但是如果我在提交点击时编写一些代码，它将无法对其进行验证.为什么这样?我哪里错了?我正在使用 jquery.validate.unobtrusive.min.js 和 jquery.validate.min.js

I am using MVC Data Anotation with jquery validation for validating my form. It works perfectly on submit but if I write some code on submit click, it doesn't validate it. Why so? Where am I wrong? I am using jquery.validate.unobtrusive.min.js and jquery.validate.min.js

我没有任何错误.就我而言，如果我在提交点击上放了一些代码，jquery验证就会停止在提交上工作.

I am not getting any kind of error. Just in my case, jquery validation stop working on submit if I put some code on submit click.

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 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();
}, "");

如果要检查，请看完整的代码.

推荐答案

引用OP :

"我正在使用带有jquery验证的MVC数据注释来验证我的表单.它在提交时效果很好，但是如果我在提交点击时编写了一些代码，它就不会对其进行验证.为什么呢?我在哪里错了?我正在使用jquery.validate.unobtrusive.min.js和jquery.validate.min.js"

"I am using MVC Data Anotation with jquery validation for validating my form. It works perfectly on submit but if I write some code on submit click, it doesn't validate it. Why so? Where am I wrong? I am using jquery.validate.unobtrusive.min.js and jquery.validate.min.js"

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

The jQuery Validation plugin automatically captures the click of the submit button, does its validation, displays errors, and then submits the form if valid. You're going wrong by putting an onclick handler within the submit button. Your onclick="return abc()" simply over-rides the click handler built into the jQuery Validation plugin.

我没有收到任何类型的错误.就我而言，如果我在提交点击上放置一些代码，jQuery验证将停止在提交上工作."

当然，您没有收到任何错误消息.那是因为一切都按照您编程的方式进行.您的onclick="return abc()"将接管jQuery Validation插件.看来您的abc()函数是手动验证.为什么要使用jQuery Validation插件来验证表单并编写自己的函数来验证表单?这是没有道理的.

Of course you're not getting an error. That's because everything is working the way you've programmed it. Your onclick="return abc()" takes over from the jQuery Validation plugin. It looks like your abc() function is manual validation. Why would you use the jQuery Validation plugin to validate the form and also write your own function to validate the form? This makes no sense.

该插件提供了一种编写您自己的规则的方法.从您的提交按钮中删除onclick="return abc()"，以使jQuery Validation插件正常运行.删除abc()函数，并将其替换为jQuery Validation插件的自定义规则/方法.

The plugin provides a method for writing your own rules. Remove the onclick="return abc()" from your submit button to let the jQuery Validation plugin operate normally. Remove the abc() function and replace it with a custom rule/method for the jQuery Validation plugin.

此外，对于jQuery，您也无需再在HTML中使用事件处理程序.事件只能在您的jQuery代码中处理.

Also with jQuery, you should never need to use an event handler within HTML again. Events can be handled solely within your jQuery code.

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

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

This is just an example, because in your case, you don't need a click handler function at all.

这篇关于如果提交有一些代码，则jQuery验证不适用于提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！