使用特定按钮仅验证一个字段

Question

我有以下渲染形式：

        <div class="form-row clearfix">
            <label for="FirstName" class="overlay">First name</label>
            <input id="FirstName" class="input-validation-error textbox" type="text" placeholder="Required" value="" name="FirstName" data-val-required="Enter first name" data-val-length-min="2" data-val-length-max="50" data-val-length="Enter 2 to 50 characters" data-val="true" />
            <div class="validate-error field-validation-error" data-valmsg-replace="true" data-valmsg-for="FirstName"></div>
        </div>

        <div class="form-row clearfix">
            <label for="Surname" class="overlay">Surname</label>
            <input id="Surname" class="input-validation-error textbox" type="text" placeholder="Required" value="" name="Surname" data-val-required="Enter surname" data-val-length-min="2" data-val-length-max="50" data-val-length="Enter 2 to 50 characters" data-val="true" />
            <div class="validate-error field-validation-error" data-valmsg-replace="true" data-valmsg-for="Surname"></div>
        </div>

        <div class="form-row clearfix">
            <label for="TelNo" class="overlay">Tel no.</label>
            <input id="TelNo" class="input-validation-error textbox" type="text" placeholder="Optional" value="" name="TelNo" />
            <div class="validate-error field-validation-error" data-valmsg-replace="true" data-valmsg-for="TelNo"></div>
        </div>

        <div id="postcode-holder" class="form-row clearfix">
            <label for="Postcode" class="overlay">Postcode</label>
            <input id="Postcode" class="input-validation-error textbox" type="text" placeholder="Required" value="" name="Postcode" data-val-required="Enter postcode" data-val-length-min="2" data-val-length-max="10" data-val-length="Enter 2 to 10 characters" data-val="true" />
            <div class="validate-error field-validation-error" data-valmsg-replace="true" data-valmsg-for="Postcode"></div>
            <input id="find-addresses" name="find-addresses" type="submit" class="orange-button" value="Find Address" />
        </div>

        <div class="button-holder">
            <button name="order-brochure" class="large orange-button">Order Brochure<span class="sprite large-white-arrow"></span></button>
        </div>

如您所见，它有两个按钮：

find-addresses - 这将用于邮政编码查找。
order-brochure - 用于提交表单数据

我试图让查找地址按钮仅验证表单中是否输入了邮政编码，但当我按下按钮时，它会验证所有字段。

我尝试添加 class 取消 - 但是这会取消所有验证，所以我尝试了以下操作：

    $("#find-addresses").on("click", function () {
        //#request-brochure-form is the correct id for the form
        $("#request-brochure-form").validate({
            rules: {
                Postcode: "required",
                Surname: {
                    required: false
                }
            }
        });
    });

但这似乎并没有改变任何东西。如何在单击“查找地址”按钮时取消对所有必填字段（邮政编码字段除外）的验证？

Answer 1

Apply/attach 发生点击事件时即时规则。

$('#find-addresses').on('click', function(){
    $('[name="Postcode"]').rules('add', { 
        required: true,
        email: true
    });
    $('#Other_Form_Fields').rules('remove');        
    $('#request-brochure-form').valid();  // trigger the validation & do NOT submit        
});

并且当您使用其他按钮时，在使用 Click 事件时，删除应用于 #find-address 单击的规则。

参考This了解更多详情。

就你的情况而言，如果你想使Surname无效，如果你使用其他按钮进行设置，请使用$('[name="Surname"]').rules('remove');

使用特定按钮仅验证一个字段

validate only one field with certain button

jquery

jquery-validate