【问题标题】:jQuery.validate and validating by classjQuery.validate 和按类验证
【发布时间】:2011-06-24 22:38:33
【问题描述】:

是否可以使用 jQuery.validate 验证表单中的整个元素类?我知道您可以按名称为元素分配规则,但是您也可以按类选择这些元素吗?我的网站上有一个表单,除了 required 规则之外不需要任何东西,而且必须输入每个字段有点笨拙,尤其是在处理 messages 对象时!

这是我的代码:

<div id="al_address" class="al_account-settings left">
<h2 class="gold alternate1">ADD A NEW ADDRESS</h2>
<form method="POST" action="#" >
    <table>
        <tr>
            <th><label for="name">* address name</label></th>
            <td><input type="text" class="al_required" name="name"></td>
        </tr>
        <tr>
            <th><label for="first_name">* first name</label></th>
            <td><input type="text" class="al_required" name="firstName"></td>
        </tr>
        <tr>
            <th><label for="last_name">* last name</label></th>
            <td><input type="text" class="al_required" name="lastName"></td>
        </tr>
        <tr>
            <th><label for="address1">* street address</label></th>
            <td><input type="text" class="al_required" name="address1"></td>
        </tr>
        <tr>
            <th><label for="address2">address 2</label></th>
            <td><input type="text" name="address2"></td>
        </tr>
        <tr>
            <th><label for="zip">* zip</label></th>
            <td><input type="text" name="zip" class="al_required"></td>
        </tr>
        <tr>
            <th><label for="city">* city</label></th>
            <td><input type="text" class="al_required" name="city"></td>
        </tr>
        <tr>
            <th><label for="state">* state</label></th>
            <td>
                <select name="state" class="al_required">
                    <option value="">Select a State</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><label for="country">* country</label></th>
            <td>
                <select name="country" class="al_required">
                    <option value="US">United States</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="al_buttons">
                <button type="reset">CANCEL</button>
                <button type="submit" class="last">ADD</button>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript" charset="utf-8">
    $('#al_address form').validate({
        rules: {
            name: 'required', first_name: 'required', last_name: 'required', address1: 'required', zip: 'required', city: 'required', state: 'required', country: 'required'
        },
        messages: {
            name: '- Required fields were left blank.'
        }
    });
</script>

就目前而言,这将显示name 的正确消息,但仅此而已。 jQuery.validate 是否可以仅在类上设置“必需”规则,并使用 messages 中的该类引用为表单中的必填字段显示统一消息?

【问题讨论】:

    标签: javascript jquery validation jquery-validate


    【解决方案1】:

    插件为此提供了一种方法,参见documentation for this。然后你可以这样做:

    $(".myClass").rules("add", {
     required:true
    });
    

    查找更多方法和选项here

    【讨论】:

    【解决方案2】:

    您可以为每个控件添加 class="required" 以获得必填字段验证,即

    <tr>
        <th><label for="name">* address name</label></th>
        <td><input type="text" class="required" name="name"></td>
    </tr>
    
    <script type="text/javascript" charset="utf-8">
        $('#al_address form').validate({
    
        });
    </script>
    

    【讨论】:

    • 这似乎并不适用于所有领域,正如您所知。如果我能够为每个必填字段自定义消息并让它只显示一次,这也将是一个更优雅的解决方案(像“必填字段留空”这样的消息不需要显示 50 次)。
    猜你喜欢
    • 1970-01-01
    • 2018-02-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多