私はjquery検証をcontainingに追加しようとしている既存のフォームを持っています:
<form id="form" method="POST" action="/title/">
{% csrf_token %}
<input type="hidden" name="id" value="6">
<input type="hidden" name="custom_checkbox_Electronic_Signature_man" value="1">
<p> <span class="style9">First Name </span>
<input type="text" name="first_name" value="" size="20" class="style7"><span class="style9">
Last Name </span>
<input type="text" name="last_name" value="" size="20" class="style7"><span class="style9">
Jqueryバリデータプラグインを使用して、次を追加しました。
$('form').validate({
rules: {
first_name: {
minlen: 3,
maxlength: 15,
required: true
},
last_name: {
minlength: 3,
maxlength: 15,
required: true
},
email: {
required: true,
email: true
},
phone1: {
required: true,
phoneUS: true
},
phone2: {
required: true,
phoneUS: true
},
street: {
required: true
},
city: {
required: true
},
state: {
required: true
},
Zip: {
zipcodeUS: true
}
},
highlight: function(element) {
$(element).closest('.style9').addClass('.style13');
//$(element).addClass('.style13');
},
unhighlight: function(element) {
$(element).closest('.style9').removeClass('.style13');
//$(element).removeClass('.style13');
},
errorElement: 'span',
errorClass: 'style13',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
上記のエラーが表示されます。私は何を間違えていますか?
minlen
をminlength
に置き換えます。機能します。minlen
プロパティがないため、call
は内部で失敗します。
$('form').validate({
rules: {
first_name: {
minlength: 3, // <- here
maxlength: 15,
required: true
},
last_name: {
minlength: 3,
maxlength: 15,
required: true
},
..........
一般的に、これは有効でないjQuery検証ルールを設定した場合に発生する可能性があるエラーです。
有効な検証ルールは、 this リンクを使用して見つけることができます。
$(document).ready(function() {
jQuery.validator.addMethod("noSpace", function(value, element){
return value.indexOf(" ")<0 && value !=="";
}, "Space are not allowed");
});
試してみる
jQuery(document).ready(function(){
$('form').validate({
rules: {
first_name: {
minlen: 3,
maxlength: 15,
required: true
},
last_name: {
minlength: 3,
maxlength: 15,
required: true
},
email: {
required: true,
email: true
},
phone1: {
required: true,
phoneUS: true
},
phone2: {
required: true,
phoneUS: true
},
street: {
required: true
},
city: {
required: true
},
state: {
required: true
},
Zip: {
zipcodeUS: true
}
},
highlight: function(element) {
$(element).closest('.style9').addClass('.style13');
//$(element).addClass('.style13');
},
unhighlight: function(element) {
$(element).closest('.style9').removeClass('.style13');
//$(element).removeClass('.style13');
},
errorElement: 'span',
errorClass: 'style13',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
});