私は Grails アプリケーションに取り組んでおり、最近、JQuery UI Validation Plug-in を使用してクライアント側の検証を追加したいと考えています。これを行うには、次の手順に従いました。
- 次のコマンドを実行しました: grails install-plugin jquery-validation-ui
- これをビューに追加しました:
<r:require modules="jquery-validate, jquery-ui" />
- 私もこれを試しました:
<r:require modules="jquery-validation-ui" />
また、一度実行したビューを調べたところ、resources タグを使用して必要な JavaScript ファイルがビューに添付されていることがわかりますが、このコードをビューに追加すると機能するため、エラーは表示されません。
<g:hasErrors bean="${modelInstance}">
<div class="alert error">
<g:renderErrors bean="${modelInstance}" as="list" />
</div>
</g:hasErrors>
以下は、プラグインによってconfigに追加されるコードです。
// Added by the JQuery Validation UI plugin:
jqueryValidationUi {
errorClass = 'error'
validClass = 'valid'
onsubmit = true
renderErrorsOnTop = false
qTip {
packed = true
classes = 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
/*
Grails constraints to JQuery Validation rules mapping for client side validation.
Constraint not found in the ConstraintsMap will trigger remote AJAX validation.
*/
StringConstraintsMap = [
blank:'required', // inverse: blank=false, required=true
creditCard:'creditcard',
email:'email',
inList:'inList',
minSize:'minlength',
maxSize:'maxlength',
size:'rangelength',
matches:'matches',
notEqual:'notEqual',
url:'url',
nullable:'required',
unique:'unique',
validator:'validator'
]
// Long, Integer, Short, Float, Double, BigInteger, BigDecimal
NumberConstraintsMap = [
min:'min',
max:'max',
range:'range',
notEqual:'notEqual',
nullable:'required',
inList:'inList',
unique:'unique',
validator:'validator'
]
CollectionConstraintsMap = [
minSize:'minlength',
maxSize:'maxlength',
size:'rangelength',
nullable:'required',
validator:'validator'
]
DateConstraintsMap = [
min:'minDate',
max:'maxDate',
range:'rangeDate',
notEqual:'notEqual',
nullable:'required',
inList:'inList',
unique:'unique',
validator:'validator'
]
ObjectConstraintsMap = [
nullable:'required',
validator:'validator'
]
CustomConstraintsMap = [
phone:'true', // International phone number validation
phoneUS:'true',
alphanumeric:'true',
letterswithbasicpunc:'true',
lettersonly:'true'
]
}
クライアント側で検証するために実行する必要がある追加の手順があるかどうか、誰かがアドバイスできますか? 検証したいテキスト ボックスの 1 つのサンプルも含めました。
<tr class="prop">
<td valign="top" class="name">
<label for="name">Name</label>
</td>
<td>
<g:textField id="name" name='name' bean="${modelInstance}" value="${name}"
size='40'/>
</td>
</tr>
前もって感謝します