Jquery valildator不工作 [英] Jquery valildator not working
问题描述
我最近发现此页面显示了jquery验证器功能澳大利亚商业号码。在我的Cshtml页面中，我有以下表单元素。
I recently found this page showing a jquery validator function for an australian business number. in my Cshtml page I have the following form element.
<div class="col-md-4">
<div class="form-group">
<label asp-for="ABN" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="ABN" class="form-control" />
<span asp-validation-for="ABN" class="text-danger" />
</div>
</div>
</div>
我已将jquery代码放入页面并使用F12调试器我注意到它确实一步到位它虽然它的数字返回false但我没有发生任何关于错误的事情..页面只是更新数据库。
I have placed the jquery code into the page and using the F12 debugger I note that it does step through it but while its a number that returns false I get nothing happening regarding an error.. the page just goes off to update the DB.
function abnValidate (value, element) {
if (value.length != 11 || isNaN(parseInt(value)))
return false;
var weighting = [10,1,3,5,7,9,11,13,15,17,19];
var tally = (parseInt(value[0]) - 1) * weighting[0];
for (var i = 1; i < value.length; i++) {
tally += (parseInt(value[i]) * weighting[i]);
}
return (tally % 89) == 0;
}
jQuery.validator.addMethod('abnValidate', abnValidate, 'This ABN is not valid');
我在 JSFiddle 但我得到的只是错误：
I have tried it in JSFiddle but all I get is the error:
{"error": "Please use POST request"}
我怀疑这是一个不知道如何正确配置码。有人可以看看我错过了什么吗？
I suspect this is a case of not knowing how to correctly configure the code. Could someone have a look and see what I am missing?
编辑
这是完整的表格，如要求。
Here is the full form as requested.
@model JobsLedger.ViewModels.CompanyDetailsViewModel
<form asp-action="Edit">
<br />
<div class="form-horizontal container">
<div class="row">
<div class="col-lg-12 text-center">
<h2><span class="glyphicon glyphicon-edit"></span> Edit Company Details </h2>
<hr>
</div>
</div>
<div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="CompanyDetailsId" />
@*ROW ONE*@
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label asp-for="CompanyName" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="CompanyName" class="form-control" />
<span asp-validation-for="CompanyName" class="text-danger" />
</div>
</div>
</div>
</div>
@*ROW TWO*@
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label asp-for="ContactFirstName" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="ContactFirstName" class="form-control" />
<span asp-validation-for="ContactFirstName" class="text-danger" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label asp-for="ContactLastName" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="ContactLastName" class="form-control" />
<span asp-validation-for="ContactLastName" class="text-danger" />
</div>
</div>
</div>
</div>
@*ROW THREE*@
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label asp-for="ContactEmail" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="ContactEmail" class="form-control" />
<span asp-validation-for="ContactEmail" class="text-danger" />
</div>
</div>
</div>
</div>
@*ROW FOUR*@
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label asp-for="MobilePhone" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="MobilePhone" class="form-control" />
<span asp-validation-for="MobilePhone" class="text-danger" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label asp-for="OfficePhone" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="OfficePhone" class="form-control" />
<span asp-validation-for="OfficePhone" class="text-danger" />
</div>
</div>
</div>
</div>
@*ROW FIVE*@
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label asp-for="CompanyEmail" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="CompanyEmail" class="form-control" />
<span asp-validation-for="CompanyEmail" class="text-danger" />
</div>
</div>
</div>
</div>
@*ROW SIX*@
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label asp-for="ABN" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="ABN" class="form-control" />
<span asp-validation-for="ABN" class="text-danger" />
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><strong>Company Address Details</strong></h4>
</div>
<div class="panel-body">
@*ROW SEVEN*@
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label asp-for="Street1" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="Street1" class="form-control" />
<span asp-validation-for="Street1" class="text-danger" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label asp-for="Street2" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="Street2" class="form-control" />
<span asp-validation-for="Street2" class="text-danger" />
</div>
</div>
</div>
</div>
@*ROW EIGHT*@
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label asp-for="State" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<select asp-for="State" asp-items="@Model.StatesList" class="form-control"></select>
<span asp-validation-for="State" class="text-danger" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label asp-for="Suburb" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="Suburb" class="form-control">
<span asp-validation-for="Suburb" class="text-danger" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label asp-for="Postcode" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="Postcode" class="form-control" readonly="readonly" />
<span asp-validation-for="Postcode" class="text-danger" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><strong>Company Bank Details</strong></h4>
</div>
<div class="panel-body">
@*ROW NINE*@
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label asp-for="BankName" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="BankName" class="form-control" />
<span asp-validation-for="BankName" class="text-danger" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label asp-for="BankBSB" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="BankBSB" class="form-control" />
<span asp-validation-for="BankBSB" class="text-danger" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label asp-for="BankAccount" class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-8 col-lg-8">
<input asp-for="BankAccount" class="form-control" />
<span asp-validation-for="BankAccount" class="text-danger" />
</div>
</div>
</div>
</div>
</div>
</div>
@*ROW TEN*@
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="col-md-4 col-lg-4 control-label">Update Form:</label>
<div class="col-md-8 col-lg-8">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
</div>
@*Closing DIV for class horizontal*@
</div>
</form>
<div>
<a asp-action="Index">Back to List</a>
</div>
@section Scripts {
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
function abnValidate(value, element) {
if (value.length != 11 || isNaN(parseInt(value)))
return false;
var weighting =
[10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
var tally = (parseInt(value[0]) - 1) * weighting[0];
for (var i = 1; i < value.length; i++) {
tally += (parseInt(value[i]) * weighting[i]);
}
return (tally % 89) == 0;
}
jQuery.validator.addMethod(
'abnValidate',
$("#ABN"), 'This ABN is not valid'
);
});
//]]></script>
}
推荐答案
来自你的例如，它并不是很清楚，在哪里和/或如果您实际上在上面的表单上调用了validate方法。您正在使用自定义添加的方法，您可能希望验证表单提交的< input type =textname =abnValidate/> 。您的自定义方法需要返回 true ，才能使 abnValidate 字段生效。如果该方法返回 false ，它应该将您作为第三个参数放置的消息返回到 addMethod 。
From your example it is not really clear, where and or if you are actually calling the validate method on the above form. You are using a custom added method with which you presumably want to validate the form-filed <input type="text" name="abnValidate" />. Your custom method needs to return true for the abnValidate field to be valid. If the method returns false, it should return the message you've put up as the third argument to addMethod.
说明：添加自定义验证方法。它必须包含名称（必须是合法的javascript标识符），基于javascript的函数和默认字符串消息。
Description: Add a custom validation method. It must consist of a name (must be a legal javascript identifier), a javascript based function and a default string message.
方法
类型：Function（）
实际的方法实现，如果元素有效则返回true。第一个论点：当前价值。第二个参数：验证元素。第三个参数：参数。
method
Type: Function()
The actual method implementation, returning true if an element is valid. First argument: Current value. Second argument: Validated element. Third argument: Parameters.
另一件事是你打算如何发送表单数据。 validate插件不会为您发送表单。它将通过定义将元素与验证方法相关联的特定规则来验证您告诉它验证的字段。由于您没有为表单元素提供任何属性，这些属性将定义用于发送表单的HTTP方法或应该处理表单数据的URI，因此很难说明您要做什么。您不必为表单提供使用validate插件的信息。
The other thing is how are you planning to send your form data. The validate plugin will not send the form for you. It will just validate the fields you tell it to validate by defining specific rules which associates an element with a validation method. Since you did not provide any attributes to the form element which would define the HTTP method to be used to send the form with or the URI which should take care of processing the form data, makes it hard to tell what you are up to. You do not have to provide the form with the information to use the validate plugin.
validate 方法有一个 submitHandler 选项，它是一个回调来处理实际的表单提交，如果表单有效，将调用该表单。
The validate method has a submitHandler option which is a callback to handle the actual form submit, which will be called if the form is valid.
submitHandler （默认：原生表单提交）
submitHandler(default: native form submit)
类型：Function（）
当表单有效时，回调处理实际提交。获取表单作为唯一参数。替换默认提交。在验证后通过Ajax提交表单的正确位置。
Type: Function()
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.
从文档中可以看出，您可以使用 submitHandler 通过ajax发送表单数据或对表单数据进行任何其他优化。
As you can tell from the docs you could just use the submitHandler to send the form data via ajax or do any other optimization to your form data.
制作长篇故事短。
以下是这可能是什么样子的一个例子。
希望有所帮助。
To make a long story short. Here is an example of what this could look like. Hope it helps.
$(function() {
// Your custom validation method added to the validate plugin
jQuery.validator.addMethod( 'abnValidate', function abnValidate(value, element) {
if (value.length != 11 || isNaN(parseInt(value)))
return false;
var weighting =
[10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
var tally = (parseInt(value[0]) - 1) * weighting[0];
for (var i = 1; i < value.length; i++) {
tally += (parseInt(value[i]) * weighting[i]);
}
return (tally % 89) == 0;
}, 'This ABN is not valid');
// call the validate method on your form element.
$(".validation-form").validate({
debug: true,
// define a rule for the form field which will make use of your abnValidate method.
rules: {
"abnValidate": {
abnValidate: true,
}
},
submitHandler: function (form) {
// 'form' is your form element being validated, do somethig with it.
var data = $(form).serializeArray();
console.log(data);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<form class="validation-form">
<input type="text" name="abnValidate" />
<button class="submit-form">submit</button>
</form>
<div class="form-status">form not yet submitted</div>
这篇关于Jquery valildator不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
