0

我一直在研究 Grails 应用程序，最近想使用 JQuery UI 验证插件添加客户端验证。我按照以下步骤这样做：

  1. 运行这个命令：grails install-plugin jquery-validation-ui
  2. 将此添加到视图中：<r:require modules="jquery-validate, jquery-ui" />
  3. 我也试过这个：<r:require modules="jquery-validation-ui" />

一旦运行，我还检查了视图，可以看到所需的 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'
    ]   
}

有人可以建议是否需要采取一些附加步骤才能在客户端进行验证？我还包含了我要验证的文本框之一的示例：

<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>

提前致谢

4

0 回答 0